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

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

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

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

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

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

2. async await 使用

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

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

• • async關鍵詞用于函數上（async函數的返回值是Promise實例對象）

  • await關鍵子用于async函數當中（await可以得到異步的結果）

　　Promise構造函數的參數是一個函數，函數里面的代碼是異步的，即Promise里面的操作，和Promise()外面的操作時異步"同時"進行的。此外，只要在函數前面加上async 關鍵字，也可以指明函數是異步的。

　　async關鍵字實際是通過Promise實現，如果async 函數中有返回一個值 ,當調用該函數時，內部會調用Promise.solve() 方法把它轉化成一個promise 對象作為返回，但如果timeout 函數內部拋出錯誤，那么就會調用Promise.reject() 返回一個promise 對象。若某函數調用一個異步函數（比如內部含有primise），該函數應用async修飾。

　　await表示“等待”，修飾返回promise 對象的表達式。注意await 關鍵字只能放到async 函數里面。

//寫一個async 函數，從而可以使用await 關鍵字， await 后面放置的就是返回promise對象的一個表達式    
        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處理多個異步請求

• 第一個異步請求的結果

• 可以作為第二個異步請求內部的參數，進行判斷等數據操作。

• 形成鏈式關系

　　示例：

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í)行的結果如圖所示：

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

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