Javascript的promise,async和await的区别详解
时间:2022-09-27 11:11:12|栏目:JavaScript代码|点击: 次
终于把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函数调用之后立即返回了,但是async还是里面还是在逐层执行
- await的作用是等待其修饰的函数内部的所有await函数都执行完毕,
- 从最外层启动一个async函数相当于go一个协程,await func 也相当于go 一个协程,不同在于await = go + waitgroup
- await比promise高明的地方在于,promise在then里面调用另一个promise时,不得不return另一个promise再then, 或者在then中回调,但是await完全不需要
- async是为了异步,await是为了异步+阻塞,缺一不可
总结
栏 目:JavaScript代码
本文标题:Javascript的promise,async和await的区别详解
本文地址:http://www.codeinn.net/misctech/214818.html