乐趣区

asyncawait-和-Promise-的用例关系

jiezi

假设我们有三个请求，req1，req2, req3，三个请求后者依赖前者的请求结果。我们先使用 Promise 封装一个异步请求的方法。

Promise 异步请求

使用 Promise 可以非常容易的封装一个异步处理的业务，通过 reslove/reject 两个 callback 来返回执行结果。

我们使用 Promise 封装一个 http get方法。

// 返回一个 Promise 对象（PromiseStatus: pending）function asyncHttpGet(url) {return new Promise((resolve, reject) => {const request = new Request(url, {method: 'GET'})
        // 使用 fetch 请求
        fetch(request)
            .then(response => {if (200 == response.status) {return response.text()
                } else {
                    // goto catch
                    throw new Error("request failed:" + response.status)
                }
            }).then(html => {// console.log(html)
                resolve(url + "get success")
            }).catch(err => {reject(err)
            });
    })
}

fetch返回的其实就是一个 Promise 对象，上例是想演示下 resolve/reject 的使用上下文，如果你早已 get，下面给出直接使用fetch 的方式：

async function asyncHttpGetV2(url) {const request = new Request(url, {method: 'GET'})
    try {let res = await fetch(request)
            .then(response => response.blob())
            .then(blob => {console.log(blob)
                // Promise resolve
                return blob
            }).catch(err => {
                // Promise resolve
                throw err
            });
        // Promise resolve
        return res;
    } catch (err) {
        // Promise reject
        throw err
    }
}

可以发现，fetch中 return 代替了resolve，throw 代替了 reject，而async 同fetch一样，也是返回了一个 Promise对象，所以 async 中的 return/throw 是否也会与自己的返回的 Promise 对象有关系呢？

回调地狱

Promise 可以优雅的实现异步，但 Promise.then().catch() 的链式结构也带来了回调地狱的问题。如下，我们回调了 3 层，才能开始写业务逻辑。

var url = window.location.href
// 虽然异步了 但 callback hell
asyncHttpGet(url).then(res => {
    var res1 = res
    asyncHttpGet(url).then(res => {
        var res2 = res
        asyncHttpGet(url).then(res => {
            var res3 = res
            console.log(res1, res2, res3);
            // todo 业务
        }).catch(err => {console.log(err)
        })        
    }).catch(err => {console.log(err)
    })
}).catch(err => {console.log(err)
})

async/await

借助 aysnc/await 解决回调地狱的问题，实现同步风格的异步逻辑，这里希望大家能理解透 2 & 3 两条总结：

  1. aysnc 返回的也是一个 Promise 对象。
  2. 如果返回了 return 标量 或 throw Error 则返回 {PromiseStatus: resolved/rejected} 的 Promise 对象。
  3. 如果遇到了 await 装饰的 Promise，则返回 {PromiseStatus: pending} 的 Promise。并等待此Promise 的执行结果：如果 Promise 触发了 resolve 则获取结果并继续向下执行；如果 Promise 触发了 reject 则抛出一个异常。所以我们在使用时应将代码使用 try...catch 封装。
  4. await 关键字只能在 async内使用，await接受一个 Promise 对象，并将其以 {PromiseStatus: pending}的状态返回。
var url = window.location.href

async function getUrls(url1, url2, url3) {
    try {// req1 success or throw error (promise reject)
        let res1 = await asyncHttpGet(url1);
        
        // req2 success or throw error (promise reject)
        let res2 = await asyncHttpGet(url2);
        
        // req3 success or throw error (promise reject)
        let res3 = await asyncHttpGet(url3);
        
        // 三个异步请求都成功 获取最终结果
        return [res1, res2, res3].join("\n")
    } catch(err) {
        // 出现错误，做一些处理
        console.log(err)
        throw err
    }
}

// 如此 3 个 Promise 请求在 async/await 的封装下变成了一个同步书写风格的异步请求
getUrls(url, url, url).then(res => {console.log(res)
    // todo 业务
}).catch(err => {console.log(err)
})

console.log("request has been sended, and waiting for res")

async 返回的是 Promise对象，所以我们还可以继续使用 async\await封装异步到同步风格。

async function getUrlsMore(url1, url2) {
    try {let getUrls1 = await getUrls(url1, url1, url1)
        let getUrls2 = await getUrls(url2, url2, url2)
        
        // Promise resolve
        return [getUrls1, getUrls2].join("\n")
    } catch (err) {
        // Promise reject
        throw err
    }
}

getUrlsMore(url, url).then(res => {console.log(res)
}).catch(err => {console.log(err)
})

async/await 和 Promise 的关系

async/await 和 Promise 的关系非常的巧妙，await必须在 async 内使用，并装饰一个 Promise 对象，async返回的也是一个 Promise 对象。

async/await中的 return/throw 会代理自己返回的 Promise 的resolve/reject，而一个 Promise 的resolve/reject会使得 await 得到返回值或抛出异常。

如果方法内无 await 节点

return 一个 字面量 则会得到一个 {PromiseStatus: resolved} 的Promise。
throw 一个 Error 则会得到一个 {PromiseStatus: rejected} 的Promise。

如果方法内有 await 节点
async 会返回一个 {PromiseStatus: pending} 的Promise（发生切换，异步等待 Promise 的执行结果）。
Promise的 resolve 会使得 await 的代码节点获得相应的返回结果，并继续向下执行。
Promise的 reject 会使得await 的代码节点自动抛出相应的异常，终止向下继续执行。

示例：

方法内无 await 节点

// 没有 await 修饰的 Promise
async function foo() {if (Math.ceil(Math.random() * 10) > 5) {// {PromiseStatus: resolved}
        return "hello world"
    } else {// {PromiseStatus: rejected}
        throw new Error("something wrong!")
    }
}

var fooPromise = foo()
console.log(fooPromise)

fooPromise.then(res => {console.log(res)
}).catch(err => {console.log(err)
})

resolved

rejected

方法内有 await 节点

注意 Promise 内的 resolve/reject 对 await节点的作用。

async function bar() {
    try {// await 返回 {PromiseStatus: pending}
        let res = await new Promise((resolve, reject) => {setTimeout(() => {if (Math.ceil(Math.random() * 10) > 5) {
                    // await 获得结果并继续执行
                    resolve("success")
                } else {
                    // await 中断执行并抛出异常
                    reject("failed")
                }
            }, 2000)
        })
        // resolve {PromiseStatus: resolved}
        return res
    } catch (err) {// reject {PromiseStatus: rejected}
        throw err
    }
}

var barPromise = bar()

// 查看 barPromise 的 PromiseStatus
console.log(barPromise)

barPromise.then(res => {console.log(res)
}).catch(err => {console.log(err)
})

await配合 fetch 的实例

then/catch返回的也是 Promise 对象，在 then/catch 内使用 return/throw 来决定返回的 Promise 是resolved/rejected。

// 没有 await 修饰的 Promise
async function bar() {
    try {// await 返回 {PromiseStatus: pending}
        let res1 = await fetch(window.location.href).then(res => {if (200 == res.status) {
                // Promise resolve
                return "request success"
            } else {
                // goto catch
                throw "request failed" + res.status
            }
        }).catch(err => {
            // Promise reject
            throw err
        })
        
        let res2 = await fetch(window.location.href).then(res => {if (200 == res.status) {
                // Promise resolve
                return "request success"
            } else {
                // goto catch
                throw "request failed" + res.status
            }
        }).catch(err => {
            // Promise reject
            throw err
        })
        
        let res3 = await fetch(window.location.href).then(res => {if (200 == res.status) {
                // Promise resolve
                return "request success"
            } else {
                // goto catch
                throw "request failed" + res.status
            }
        }).catch(err => {
            // Promise reject
            throw err
        })
        
        // 三个请求都成功 则返回相应的数据 Promise resolved
        return [res1, res2, res3].join("\n")
    } catch (err) {
        // Promise rejected
        throw err
    }
}

var barPromise = bar()

// 查看 barPromise 的 PromiseStatus
console.log(barPromise)

// Promise reject 抛出异常 需要使用 catch 捕捉
barPromise.then(res => {console.log(res)
}).catch(err => {console.log(err)
})
退出移动版