Vue 中 Promise 的then方法非同步使用及async/await 非同步使用總結

香吧香發表於2023-01-12
VuePromise非同步AI

轉載請註明出處：

1.Promise 的 then 方法使用　　

　　then 方法是 Promise 中 處理的是非同步呼叫，非同步呼叫是非阻塞式的，在呼叫的時候並不知道它什麼時候結束，也就不會等到他返回一個有效資料之後再進行下一步處理；

　　想了解 Promise 的使用，可以看這篇文章： ES6 中 Promise物件使用學習 

　　使用示例：

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

　　Promise 的回撥函式屬於非同步任務，會在同步任務之後執行。上面程式碼會先輸出2，再輸出1。因為console.log(2)是同步任務，而then的回撥函式屬於非同步任務，一定晚於同步任務執行。　　

　　但是，Promise 的回撥函式不是正常的非同步任務，而是微任務（microtask）。它們的區別在於，正常任務追加到下一輪事件迴圈，微任務追加到本輪事件迴圈。這意味著，微任務的執行時間一定早於正常任務。

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

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

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

　　上面程式碼的輸出結果是321。這說明then的回撥函式的執行時間，早於setTimeout(fn, 0)。因為then是本輪事件迴圈執行，setTimeout(fn, 0)在下一輪事件迴圈開始時執行。

　　所以在 使用Promise 的then方法時，一定要考慮 業務的處理邏輯，是否需要序列執行，如果需要序列執行，就要避免 後續的任務 早於 非同步的任務執行結束

2. async await 使用

　　使用 async 與 await 可以解決多個非同步任務執行時的序列執行，也可以解決 Promise 使用 then 方法 非同步執行的流程控制

　　可以使用 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();

　　執行的結果如圖所示：

 

 　　這種寫法可以保證的執行順序；

　　

 

相關文章