以同步格式寫異步代碼 - await

用優雅的方式編寫異步代碼-Eric

---

前言

隨着互聯網的發展，js的應用越來越廣泛，地位也越來越重要，網站也發生了翻天覆地的變化。
到目前爲止，前後臺基本徹底分離，交互都採用異步的方式，ajax、fetch...

---

fetch

目前大部分互聯網公司開發都轉向React、Vue，前後臺交互也大都使用fetch取代ajax，而我們知道fetch的實現原理採用了es6中的Promise，Promise把異步請求變得簡單優雅，代碼示例：

fetch(url, {})
    .then(response=>{})
    .then(res=>{})
    .catch(err=>{});

我們要處理返回結果一般這麼寫：

fetch(url, {})
    .then(response=>{ return response.json() })
    .then(res=>{
        // 結果處理
        if(res.success){
            // somecode...
        }
    })
    .catch(err=>{});

如果處理邏輯比較多，這麼寫不直觀，能不能這麼寫呢：

let res = fetch(url, {});
// 結果處理
if(res.success){
    // somecode...
}

結果當然是可以的，那就是es7中的await

---

await & async

await 是es7中定義的一個關鍵字，可以等待Promise返回數據，相當於暫停功能，await字面意思就是等待。
async也是es7中的關鍵字，字面意思是異步，作用就是聲明一個異步方法。

注意：
1、await不能單獨存在，必須和async（異步）關鍵字一起使用。
2、await 後面如果不是一個Promise對象的話，那麼不會等待哦！

代碼走一波：

// async寫在方法前面
asyncFunc = async ()=>{

    console.time();

    let res = await (new Promise((resolve, reject)=>{
        setTimeout(resolve.bind(this, 10), 2000);
    }));

    console.timeEnd(); // default: 2711.656982421875ms  等待Promise執行完畢

    console.log( res ); // 10  拿到了Promise的返回結果
}

asyncFunc();

await 對普通異步代碼無效：

asyncFunc2 = async ()=>{

    console.time();

    let res = await setTimeout( ()=>{return 10}, 2000);

    console.timeEnd(); // default: 0.705078125ms， 說明沒有等待setTimeout完成

    console.log( res ); // 737 setTimeout定時器的返回值
}

asyncFunc2();

更多操作自己去實踐吧！

---

擴展

有興趣的小夥伴可以去研究下 yield 關鍵字哦， 可以暫停方法的執行，並返回yield 後面的值

喜歡我的文章就點贊轉發吧！