共计 5104 个字符，预计需要花费 13 分钟才能阅读完成。
假设我们有三个请求，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 两条总结：
-
aysnc返回的也是一个Promise对象。 - 如果返回了
return 标量或throw Error则返回{PromiseStatus: resolved/rejected}的Promise对象。 - 如果遇到了
await装饰的Promise，则返回{PromiseStatus: pending}的Promise。并等待此Promise的执行结果：如果Promise触发了resolve则获取结果并继续向下执行；如果Promise触发了reject则抛出一个异常。所以我们在使用时应将代码使用try...catch封装。 -
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)
})