js中async与await使用（ES8的一个新特性）

一、async 和 await

async与await两种代码相结合，可以让异步代码像同步代码一样。

二、async

async 修饰的函数返回值为Promise对象。

Promise对象的结果由async修饰的函数的返回值决定。

1. 如果函数不返回任何值，则默认返回的是undefined，Promise 对象值为成功。
2. 如果函数返回一个非Promise 对象，则返回值为一个成功的Promise对象。
3. 如果函数抛出异常，则返回一个失败的Promise对象
4. 如果函数返回一个Promise对象，那么成功或失败由这个返回的Promise对象状态决定。

①、不返回任何值

console.log("-------------- async 修饰的函数不返回任何值 ------------------")
async function fn(){
    console.log("没有任何返回值")
}
var p1 = fn()
console.log(p1)

执行结果如下：

 ②、返回一个字符串

console.log("-------------- async 修饰的函返回字符串 ------------------")
async function fn2(){
    return "ok"
}
var p2 = fn2()
console.log(p2)

执行结果如下：

 ③、抛出异常

console.log("-------------- async 修饰的函数抛出异常 ------------------")
async function fn3(){
    throw "读取文件失败"
}
var p3 = fn3()
console.log(p3)

 ④、返回一个promise对象

console.log("-------------- async 修饰的函数返回一个promise对象 ------------------")
async function fn4(){
    return new Promise(function(resolve,reject){
        reject("返回失败")
    })
}
var p4 = fn4()
console.log(p4)

 三、await 

1. await 必须放在async函数中
2. await 右侧的表达式一般为promise对象
3. await 返回的是promise 成功的值
4. await的promise失败了，就会抛出异常，需要通过try ... catch... 来捕获处理

①、

console.log("放在async中的await 表达式，且该表达式为promise对象")
const p = new Promise(function(resolve,reject){
    resolve("文件读取成功")
})

async function aw1(){
    let result1 = await p
    console.log(result1)
}
aw1()

运行结果：

 ②、await的promise失败了

console.log("await中的promise失败了")
const p2 = new Promise(function(resolve,reject){
    reject("失败了")
})

async function aw2(){
    try{
        let result2 = await p2
    }catch(e){
        console.error(e)
    }
}
aw2()

运行结果：

 四、Promise与 async await使用对比

console.log("例子，发送一个Ajax请求")

function sendAjax(url){
    return new Promise((resolve,reject) => {
        const x = new XMLHttpRequest()
        x.open("GET",url)
        x.send()

        x.onreadystatechange = function(){
            if(x.readyState === 4){
                if(x.status >= 200 && x.status < 300){
                    resolve(x.response)
                }else{
                    reject(x.status)
                }
            }
        }
    })
}

// promise then方法测试
sendAjax("http://localhost/html/learnJs/asyncAwaitDemo.html").then(value => {
    console.log(value)
})

// 使用async await方法测试
async function getUrl(url){
    let val = await sendAjax("http://localhost/html/learnJs/asyncAwaitDemo.html")
    console.log(val)
}
getUrl()