[TOC] #### 1. 前言 ---- async/await 是 ES7 提出的基于 Promise (ES6 中提出的) 的解決異步的最終方案 async + await 的作用: 簡化 promise 的異步操作，把 promise 的異步操作編程變?yōu)橥降膶懛? async 將一個函數(shù)標(biāo)記為異步函數(shù)，await 需要在異步函數(shù)中使用，標(biāo)記當(dāng)前操作是異步操作 async + await 必須配合 promise 使用，同時 async 和 await 必須一起使用。即 await 必須在 async 標(biāo)記的函數(shù)中使用 #### 2. 獲取成功的結(jié)果 --- 在 vue 腳手架和 uniapp 中經(jīng)常使用的寫法 ``` function getProfile() { return new Promise((resolve, reject) => { // 使用定時器模擬接口請求 setTimeout(() => { resolve({ code: 200, msg: "用戶信息", data: { id: 1, name: "liang" } }) }, 3000); }); } // 以下代碼會執(zhí)行 輸入 123 再執(zhí)行輸出 res function loadData() { getProfile().then(res => { console.log(res); }) console.log(123); } // 下面寫法會使 getProfile() 先執(zhí)行 // 等待三秒后執(zhí)行完再把得到的結(jié)果賦值給左邊的res，然后再繼續(xù)往下執(zhí)行 async function loadData() { const res = await getProfile() console.log(res); console.log(123); } ``` #### 3. 獲取失敗的結(jié)果 --- 當(dāng) Promise 拋出錯誤信息時，控制臺默認是直接拋出異常的 ``` reject('接口請求失敗') ```  可以使用 try ... catch 捕獲 promise 拋出的錯誤 ``` try { const res = await getProfile() console.log(res); } catch (error) { console.log('error: ', error); } ``` #### 4. 多個 Promise 的場景 --- 使用 Promise Promise.all 的參數(shù)是一個數(shù)組，數(shù)組的每一項是一個返回的 promise 的函數(shù)調(diào)用 ```javascript Promise.all([getProfile(), getProfile()]).then(res => { console.log(res, 'res'); }) ``` 使用 await 因為 Promise.all 返回的也是一個 Promise，所以也可以使用 await ```javascript async function loadData() { const res = await Promise.all([getProfile(), getProfile()]) console.log(res); } ``` #### 5. async 標(biāo)記函數(shù) --- 使用 async 標(biāo)記一個函數(shù)，那么當(dāng)調(diào)用這個函數(shù)時，該函數(shù)會返回一個 promise 對象 如果沒有在 async 函數(shù)中 return ，那么 promise 對象的 resolve 就是 undefined 如果在 async 函數(shù)中寫了 return，那么 promise 對象的 resolve 就是 return 的值 如果 async 里的代碼都是同步的，那么這個函數(shù)被調(diào)用就會同步執(zhí)行 ``` async function fn(){ console.log('a') } fn() console.log('b') //a //b ``` #### 6. await 等待異步操作執(zhí)行完成 --- 右側(cè)的表達式的結(jié)果就是 await 要等的東西，等到之后，對于 await 來說，分兩個情況。是 promise 對象，不是 promise 對象 ``` const res = await getProfile() ``` 如果不是 promise 對象，await 會阻塞后面的代碼，先執(zhí)行 async 外面的同步代碼，再回到 async 內(nèi)部，把這個非 promise 的東西，作為 await 表達式的結(jié)果 ``` function fn() { console.log(1) return 'this is return' } async function f1() { const res = await fn() console.log(2) console.log(res); } f1() console.log(3) //1 //3 //2 // this is return ``` 如果 await 等到的是一個 promise 對象，await 也會暫停 async 后面的代碼，先執(zhí)行 async 外面的同步代碼，等著 Promise 對象 fulfilled，然后把 resolve 的參數(shù)作為 await 表達式的運算結(jié)果 ``` function fn() { console.log(1) return new Promise((resolve, reject) => { setTimeout(() => { resolve('this is return') }, 1500); }); } async function f1() { const res = await fn() console.log(2) console.log(res); } f1() console.log(3) //1 //3 //2 // this is return ``` #### 6. async + await 相關(guān)文章推薦 --- async 和 await 【簡書】: [https://www.jianshu.com/p/b4fd76c61dc9](https://www.jianshu.com/p/b4fd76c61dc9)