以同步格式寫異步代碼 - 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中的關鍵字，字面意思是異步，做用就是聲明一個異步方法。

注意：
一、await不能單獨存在，必須和async（異步）關鍵字一塊兒使用。
二、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 後面的值

喜歡個人文章就點贊轉發吧！