Javascript中promise,async和await的區(qū)別是什么

本文小編為大家詳細(xì)介紹“Javascript中promise,async和await的區(qū)別是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Javascript中promise,async和await的區(qū)別是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

終于把promise， async， await的區(qū)別和聯(lián)系弄清楚了，看下面代碼

寫法1，2是promise的寫法

寫法6是async和await的寫法

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

// 以下三個(gè)請(qǐng)求依次執(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í)行完畢，

• 從最外層啟動(dòng)一個(gè)async函數(shù)相當(dāng)于go一個(gè)協(xié)程，await func 也相當(dāng)于go 一個(gè)協(xié)程，不同在于await = go + waitgroup

• await比promise高明的地方在于，promise在then里面調(diào)用另一個(gè)promise時(shí)，不得不return另一個(gè)promise再then， 或者在then中回調(diào)，但是await完全不需要

• async是為了異步，await是為了異步+阻塞，缺一不可

讀到這里，這篇“Javascript中promise,async和await的區(qū)別是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。