非同步操作系列之Generator函式與Async函式

大猿猴發表於2018-11-20
非同步函式

Generator函式

形式

function* myGenerator(){
   yield 'Hello';
   yield 'World';
   return 'ECMAScript';
}
複製程式碼

作用

相當於一個狀態機。

特點

  • function關鍵字帶有星號*
  • 函式體內使用關鍵字yield

返回值

呼叫generator函式後，函式不執行，返回結果自然不是函式執行結果，而是返回一個遍歷器物件，可以依次遍歷generator函式內部的每一個狀態。

使用

  1. 定義一個generator函式如上。

  2. 呼叫generator函式，獲取迭代器物件。

     const gen = myGenerator();
複製程式碼

  3. 呼叫返回物件的next方法， 執行generator的下一狀態。

    var obj = gen.next();
複製程式碼

  4. 繼續呼叫next方法，執行下一狀態，直至obj物件的done屬性值為true為止。

細節

  1. yield語句只能在generator函式使用，否則報語法錯誤。
  2. yield語句在函式中可以執行多次，return語句在函式中只能執行一次。但是yield語句和return語句都可後跟一個表示式的值。
  3. next方法可以帶一個引數，來表示上一條yield語句的返回值。

Async函式

形式

function func1()
  return new Promise((resolve,reject) => {resolve("Hello")});
}
function func2(){
  return new Promise((resolve,reject) => {resolve("World")});
}
async function myAsyncFunc(){
   await func1();
   await func2();
}
複製程式碼

作用

generator函式的語法糖。目的只是為了簡化書寫，提高閱讀性。

特點

  1. 關鍵字async取代星號*
  2. await語句取代yield語句

返回值

呼叫async函式後，函式執行，並返回一個Promise物件，可以看出async函式是將多個非同步操作包裝成一個Promise物件，而await語句相當於then操作的語法糖。

使用

  1. 定義一個async函式如上。

  2. 呼叫async函式，獲取Promise物件。

     const pro = myAsyncFunc();
複製程式碼

  3. 呼叫Promise物件的then方法， 獲取每次非同步操作的結果。

    pro.then((result) => {console.log(result)},(error) => {console.log(error)});
複製程式碼

細節

  1. yield語句後只能跟Thunk函式或Promise物件，await語句後可跟Promise物件或基本資料型別的值，但此時是同步操作。
  2. await語句後跟Promise物件時，使用try...catch語句，防止報錯。

相關文章