理解 es7 async await

說明

• 開始進行 react 項目，須要用到 es7 的 async 和 await 來替代之前的 promise 的方法q請求接口。在這裏學習一下和你們一塊兒分享。
• 適用：es6，es7初學者

---

一 理解 promise

• 須要明白 es7 的 await 和 async 是什麼咱們想要看看 promise 是什麼？

promise 的使用

老式的處理方法

• 在講 promise 以前咱們也須要先了解一下，咱們平時在處理接口成功和失敗的時候的處理方法以下。👇

function successCallback(result) {
  console.log("It succeeded with " + result);
}

function failureCallback(error) {
  console.log("It failed with " + error);
}

doSomething(successCallback, failureCallback);
複製代碼

promise替代了下面這種舊式的函數，這種舊式函數須要兩個回調函數，並最終調用處理成功事件或者處理失敗事件的回調函數

用 promise 處理異步

• 一個 Promise 就是一個表明了異步操做最終完成或者失敗的對象,新式函數返回一個你能夠直接綁定回調函數的promise對象，來代替上面👆那種舊式的函數形式以下👇：

const promise = doSomething(); 
promise.then(successCallback, failureCallback);

// 固然你能夠簡單一點
doSomeThing().then(successCallback,failureCallback)
複製代碼

promise 鏈式調用

• 若是咱們有多個異步操做，和須要在一個請求成功後再請求其餘的接口。之前咱們是這樣作的

doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);
複製代碼

這就是咱們熟知的回調地獄

• 一些常見的需求咱們不得不連續進行兩個或者跟多的異步操做和請求，每個請求都須要在上個請求的成功的執行以後進行。咱們能夠經過 promise chain 來完成這種需求。

doSomething().then(function(result) {
  return doSomethingElse(result);
})
.then(function(newResult) {
  return doThirdThing(newResult);
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);
複製代碼

避免了回調地獄咱們如今這樣處理

---

咱們花了些時間瞭解 promise 作鋪墊，下面來了解 async 和await 的使用

二 async function

async 返回值

• async用於定義一個異步函數，該函數返回一個Promise。

await

• await 操做符用於等待一個Promise 對象。它只能在異步函數 async function 中使用。

概況

• 在 es7 的 draft 中提出 async 和 await來進一步的解決異步函數的問題。
• async function 聲明將定義一個返回 AsyncFunction 對象的異步函數。

你還可使用 異步函數表達式 來定義異步函數。

• demo

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();
複製代碼

詳解👆的 demo

• 當調用一個 async 函數時，會返回一個 Promise 對象。當這個 async 函數返回一個值時，Promise 的 resolve 方法會負責傳遞這個值；當 async 函數拋出異常時，Promise 的 reject 方法也會傳遞這個異常值。
• async 函數中可能會有 await 表達式，這會使 async 函數暫停執行，等待表達式中的 Promise 解析完成後繼續執行 async 函數並返回解決結果。

async/await的用途是簡化使用 promises 異步調用的操做，並對一組 Promises執行某些操做。正如Promises相似於結構化回調，async/await相似於組合生成器和 promises。

用 async 改寫 promise

• promise chain

function getProcessedData(url) {
  return downloadData(url) // returns a promise
    .catch(e => {
      return downloadFallbackData(url)  // returns a promise
        .then(v => {
          return processDataInWorker(v); // returns a promise
        }); 
    })
    .then(v => {
      return processDataInWorker(v); // returns a promise
    });
}
複製代碼

• async function

async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); 
  } catch (e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}
複製代碼

注意，在上述示例中，return 語句中沒有 await 操做符，由於 async function 的返回值將隱式傳遞給 Promise.resolve。

寫法

• 如今咱們這樣的來書寫異步請求

const signup = async () => {
            try {
                const resp = await signUp(parmas);
                doSometing(resp);
            } catch (error) {
                alert(error)；
            }
        }
    };
複製代碼

async 函數異常

• 咱們直接在async函數中拋出一個異常，因爲返回的是一個Promise，所以，這個異常能夠調用返回Promise的catch()方法捕捉到。

let sayHi = async functionsayHi(){
    throw new Error('出錯了');
}
sayHi().then(result=> {
    console.log(result);
}).catch(err=> {
    console.log(err.message);   //出錯了
});
複製代碼

• 和Promise鏈的對比：

咱們的async函數中能夠包含多個異步操做，其異常和Promise鏈有相同之處，若是有一個Promise被reject()那麼後面的將不會再進行。

引用

mdn promise&async function