但是，Promise 的回調(diào)函數(shù)不是正常的異步任務(wù)，而是微任務(wù)（microtask）。它們的區(qū)別在于，正常任務(wù)追加到下一輪事件循環(huán)，微任務(wù)追加到本輪事件循環(huán)。這意味著，微任務(wù)的執(zhí)行時(shí)間一定早于正常任務(wù)。

setTimeout(function() {
  console.log(1);
}, 0);

new Promise(function (resolve, reject) {
  resolve(2);
}).then(console.log);

console.log(3);
// 3
// 2
// 1

　　上面代碼的輸出結(jié)果是321。這說明then的回調(diào)函數(shù)的執(zhí)行時(shí)間，早于setTimeout(fn, 0)。因?yàn)?code>then是本輪事件循環(huán)執(zhí)行，setTimeout(fn, 0)在下一輪事件循環(huán)開始時(shí)執(zhí)行。

　　所以在 使用Promise 的then方法時(shí)，一定要考慮 業(yè)務(wù)的處理邏輯，是否需要串行執(zhí)行，如果需要串行執(zhí)行，就要避免 后續(xù)的任務(wù) 早于 異步的任務(wù)執(zhí)行結(jié)束

2. async await 使用

　　使用 async 與 await 可以解決多個(gè)異步任務(wù)執(zhí)行時(shí)的串行執(zhí)行，也可以解決 Promise 使用 then 方法 異步執(zhí)行的流程控制

　　可以使用 async 和 await來得到我們的返回值

• • async關(guān)鍵詞用于函數(shù)上（async函數(shù)的返回值是Promise實(shí)例對象）

  • await關(guān)鍵子用于async函數(shù)當(dāng)中（await可以得到異步的結(jié)果）

　　Promise構(gòu)造函數(shù)的參數(shù)是一個(gè)函數(shù)，函數(shù)里面的代碼是異步的，即Promise里面的操作，和Promise()外面的操作時(shí)異步"同時(shí)"進(jìn)行的。此外，只要在函數(shù)前面加上async 關(guān)鍵字，也可以指明函數(shù)是異步的。

　　async關(guān)鍵字實(shí)際是通過Promise實(shí)現(xiàn)，如果async 函數(shù)中有返回一個(gè)值 ,當(dāng)調(diào)用該函數(shù)時(shí)，內(nèi)部會調(diào)用Promise.solve() 方法把它轉(zhuǎn)化成一個(gè)promise 對象作為返回，但如果timeout 函數(shù)內(nèi)部拋出錯(cuò)誤，那么就會調(diào)用Promise.reject() 返回一個(gè)promise 對象。若某函數(shù)調(diào)用一個(gè)異步函數(shù)（比如內(nèi)部含有primise），該函數(shù)應(yīng)用async修飾。

　　await表示“等待”，修飾返回promise 對象的表達(dá)式。注意await 關(guān)鍵字只能放到async 函數(shù)里面。

//寫一個(gè)async 函數(shù)，從而可以使用await 關(guān)鍵字， await 后面放置的就是返回promise對象的一個(gè)表達(dá)式    
        async getUserList(){
            const {data: res} = await this.$http.get('users', {
                params: this.queryInfo
            })
            //console.log(res)
            if (res.meta.status !== 200) return this.$message.error('獲取用戶列表失敗! ')
            this.userlist = res.data.users
            this.total = res.data.total
        }

3. async/await處理多個(gè)異步請求

• 第一個(gè)異步請求的結(jié)果

• 可以作為第二個(gè)異步請求內(nèi)部的參數(shù)，進(jìn)行判斷等數(shù)據(jù)操作。

• 形成鏈?zhǔn)疥P(guān)系

　　示例：

function getSomething() {
    return "something";
}
  
async function testAsync() {
    return Promise.resolve("hello async");
}
  
async function test() {
    const v1 = await getSomething();
    const v2 = await testAsync();
    console.log(v1, v2);
}
  
test();

　　執(zhí)行的結(jié)果如圖所示：

這種寫法可以保證的執(zhí)行順序；

到此這篇關(guān)于Vue 中 Promise 的then方法異步使用及async/await 異步使用總結(jié)的文章就介紹到這了,更多相關(guān)Promise 的 then 方法使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！