在vue中發(fā)現(xiàn)一個(gè)問(wèn)題，如果在mounted中同時(shí)要調(diào)用兩個(gè)接口，分別是接口a和接口b，但是接口b需要用到接口a的數(shù)據(jù),假設(shè)這個(gè)數(shù)據(jù)為id。如果按平常方式寫(xiě)就會(huì)出現(xiàn)向接口b發(fā)送請(qǐng)求的時(shí)候，id為空。這就是因?yàn)閮蓚€(gè)接口都是異步請(qǐng)求，我們需要把他們編程同步的。

Promise

Promise 對(duì)象用于表示一個(gè)異步操作的最終完成 (或失敗)及其結(jié)果值。
這樣使得異步方法可以像同步方法那樣返回值：異步方法并不會(huì)立即返回最終的值，而是會(huì)返回一個(gè) promise，以便在未來(lái)某個(gè)時(shí)候把值交給使用者。

一個(gè) Promise 必然處于以下幾種狀態(tài)之一：

• 待定（pending）: 初始狀態(tài)，既沒(méi)有被兌現(xiàn)，也沒(méi)有被拒絕。
• 已兌現(xiàn)（fulfilled）: 意味著操作成功完成。
• 已拒絕（rejected）: 意味著操作失敗。

async和await

async和await關(guān)鍵字讓我們可以用一種更簡(jiǎn)潔的方式寫(xiě)出基于Promise的異步行為。

??async函數(shù)可能包含0個(gè)或者多個(gè)await表達(dá)式。await表達(dá)式會(huì)暫停整個(gè)async函數(shù)的執(zhí)行進(jìn)程并出讓其控制權(quán)，只有當(dāng)其等待的基于promise的異步操作被兌現(xiàn)或被拒絕之后才會(huì)恢復(fù)進(jìn)程。promise的解決值會(huì)被當(dāng)作該await表達(dá)式的返回值。使用async / await關(guān)鍵字就可以在異步代碼中使用普通的try / catch代碼塊。

function settime1(){
    console.log("我在return外面")
    return new Promise(resolve=>{
        setTimeout(function(){
            console.log("正在進(jìn)行中...")
            resolve('resolved');
        },5000)
    })
   
}
function add(){
    let a = 1
    let b = 1
    // console.log(a+b)
    return a+b
}
async function result(){
   const r1 = await settime1() // await通過(guò)promise暫停了線程，等待運(yùn)行完畢
   console.log(r1)
   const r2 = add()
   console.log(r2)
   
}

result()

總結(jié)

在我們平常寫(xiě)接口的時(shí)候，最好還是用async/await 配合promise進(jìn)行封裝，不然就會(huì)導(dǎo)致一開(kāi)始提出的問(wèn)題。