本文详细对比了JavaScript中Promise与async/await两种异步处理模式。通过代码示例解析了Promise链式调用的复杂性，阐述async函数立即返回但内部顺序执行的特性，以及await作为“协程+等待组”在简化嵌套回调、实现逻辑阻塞方面的优势，帮助开发者理解两者在异步编程中的不同应用场景。
经过深入研究与实践，终于厘清了Promise、async与await三者之间的区别与内在联系，具体表现可参考下方的代码示例。
代码中的写法1和写法2展示了基于Promise的传统异步处理模式。
代码中的写法6则演示了使用async和await关键字的现代异步处理模式。
重点对比写法2与写法6即可清晰看出差异：写法2是Promise的典型链式调用方式，而写法6则是async/await的标准用法。
// 以下三个请求依次执行
req1 = () => { return fetch("http://example.com/api/v1/get")}
req2 = () => { return fetch("http://example.com/api/v1/post")}
req3 = () => { return fetch("http://example.com/api/v1/delete")}
//写法1
req1().then(res=>{
console.log("1: ",res)
req2().then(res =>{
console.log("2: ",res)
req3().then(res =>{
console.log("3: ",res)
})
})
})
// 写法2
req1().then(res =>{
console.log("1: ", res)
return req2()
})
.then(res =>{
console.log("2: ", res)
return req3()
})
.then(res =>{
console.log("3: ", res)
})
// 写法3
function f1(){
req1()
req2()
req3()
}
// 写法4
async function f2(){
await req1
await req2
await req3
}
// 写法5
async function f3(){
req1().then(res => {
console.log("1:", res)
})
await f3_1()
}
async function f3_1(){
req1().then(res => {
console.log("2:", res)
})
await f3_2()
}
async function f3_2(){
req2().then(res=>{
console.log("3: ",res)
})
}
// 写法6
ff()
async function ff(){
await req1_good()
}
async function req1_good(){
fetch("http://example.com/api/v1/get").then(res =>{
console.log("1: ",res)
})
await req2_good()
}
async function req2_good() {
fetch("http://example.com/api/v1/post").then(res =>{
console.log("2: ",res)
})
await req3_good()
}
async function req3_good() {
fetch("http://example.com/api/v1/delete").then(res => {
console.log("3: ",res)
})
}
- 最外层的async函数在调用后会立即返回一个Promise对象，但async函数内部的代码依然会按照顺序逐层执行。
- await关键字的核心作用是挂起当前async函数的执行，直到其修饰的异步操作（包括内部所有await调用的函数）全部执行完毕。
- 从概念上讲，启动一个最外层的async函数类似于Go语言中启动一个协程（goroutine），而await func则类似于“启动协程并等待其完成”（go + waitgroup）的组合行为。
- await相比Promise更优越的地方在于：当在Promise的then回调中需要调用另一个异步操作时，必须显式return该Promise或处理回调逻辑；而使用await则完全无需这些繁琐操作，代码更直观。
- async关键字用于声明异步函数，await关键字用于实现异步操作的同步阻塞效果，两者结合使用才能完整表达“异步+等待”的语义，缺一不可。
总结
本文到此结束，希望上述解析能为您带来帮助，欢迎持续关注本站以获取更多技术内容！