如何详细区分JavaScript中Promise、async和await的用法与区别？

本文共计636个文字，预计阅读时间需要3分钟。

最终搞懂了 Promise、async、await 的区别和联系，下面是代码和写法：

1. 代码示例：javascript// 使用 Promisefunction fetchData() { return new Promise((resolve, reject)=> { // 模拟异步操作 setTimeout(()=> { resolve(数据获取成功); }, 1000); });}

fetchData().then(data=> { console.log(data);}).catch(error=> { console.error(error);});

// 使用 async 和 awaitasync function fetchDataAsync() { try { const data=await fetchData(); console.log(data); } catch (error) { console.error(error); }}

2. 写法说明：- 写法1：Promise 的写法，适用于返回 Promise 对象的场景。- 写法2：Promise 的写法，使用 `.then()` 和 `.catch()` 处理异步操作的结果。- 写法3：async 函数的写法，使用 `await` 等待 Promise 完成。- 写法4：async 函数的写法，使用 `try...catch` 处理异步操作中的错误。- 写法5：Promise 的典型写法，适用于直接返回 Promise 对象的场景。- 写法6：async 和 await 的写法，适用于需要同步处理多个异步操作的场景。

终于把promise， async， await的区别和联系弄清楚了，看下面代码

写法1，2是promise的写法

写法6是async和await的写法

主要看第2种写法和第6中写法即可， 第2种写法是promise的典型写法，第6中写法是async， await的典型写法

// 以下三个请求依次执行 req1 = () => { return fetch("example.com/api/v1/get")} req2 = () => { return fetch("example.com/api/v1/post")} req3 = () => { return fetch("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("example.com/api/v1/get").then(res =>{ console.log("1: ",res) }) await req2_good() } async function req2_good() { fetch("example.com/api/v1/post").then(res =>{ console.log("2: ",res) }) await req3_good() } async function req3_good() { fetch("example.com/api/v1/delete").then(res => { console.log("3: ",res) }) }

• 最外层的async函数调用之后立即返回了，但是async还是里面还是在逐层执行
• await的作用是等待其修饰的函数内部的所有await函数都执行完毕，
• 从最外层启动一个async函数相当于go一个协程，await func 也相当于go 一个协程，不同在于await = go + waitgroup
• await比promise高明的地方在于，promise在then里面调用另一个promise时，不得不return另一个promise再then， 或者在then中回调，但是await完全不需要
• async是为了异步，await是为了异步+阻塞，缺一不可

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!