Javascript的promise,async和await的區(qū)別詳解
終于把promise, async, await的區(qū)別和聯(lián)系弄清楚了,看下面代碼
寫法1,2是promise的寫法
寫法6是async和await的寫法
主要看第2種寫法和第6中寫法即可, 第2種寫法是promise的典型寫法,第6中寫法是async, await的典型寫法
// 以下三個請求依次執(zhí)行
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函數(shù)調(diào)用之后立即返回了,但是async還是里面還是在逐層執(zhí)行
- await的作用是等待其修飾的函數(shù)內(nèi)部的所有await函數(shù)都執(zhí)行完畢,
- 從最外層啟動一個async函數(shù)相當于go一個協(xié)程,await func 也相當于go 一個協(xié)程,不同在于await = go + waitgroup
- await比promise高明的地方在于,promise在then里面調(diào)用另一個promise時,不得不return另一個promise再then, 或者在then中回調(diào),但是await完全不需要
- async是為了異步,await是為了異步+阻塞,缺一不可
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
js實現(xiàn)頁面轉(zhuǎn)發(fā)功能示例代碼
本文為大家介紹的是使用js實現(xiàn)頁面轉(zhuǎn)發(fā),具體實現(xiàn)如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08
js模仿windows桌面圖標排列算法具體實現(xiàn)(附圖)
需要引入Jquery,如果需要全部功能,請引入jquery-ui和jquery-ui.css,具體實現(xiàn)步驟如下,感興趣的朋友可以參考下哈2013-06-06
use jscript with List Proxy Server Information
use jscript with List Proxy Server Information...2007-06-06
javascript實現(xiàn)鼠標拖動改變層大小的方法
這篇文章主要介紹了javascript實現(xiàn)鼠標拖動改變層大小的方法,涉及javascript操作鼠標事件及樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
BootStrap中Datetimepicker和uploadify插件應(yīng)用實例小結(jié)
這篇文章主要介紹了BootStrap中Datetimepicker和uploadify插件應(yīng)用實例小結(jié)的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-05-05
JS基于cookie實現(xiàn)來賓統(tǒng)計記錄訪客信息的方法
這篇文章主要介紹了JS基于cookie實現(xiàn)來賓統(tǒng)計記錄訪客信息的方法,通過javascript記錄訪客信息到cookie的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08

