使用FETCH API和ES6發電機的異步API

核心要點

• ECMAScript 6 (ES6) 通過 Promise 和 Generator 更好地支持異步編程，並引入了 Fetch API，旨在取代 XMLHttpRequest 成為與遠程資源通信的基礎。
• Fetch API 的方法返回 ES6 Promise 對象，這些對象可以與 Generator 一起使用，構成複雜異步操作的基礎，例如一系列操作，其中每個操作都依賴於前一個操作返回的值。
• Generator 可以與 Fetch API 一起用於執行諸如長輪詢之類的任務，其中客戶端不斷向服務器發送請求，直到獲得響應。這是通過在響應包含數據之前產出響應來完成的。
• Fetch API 和 ES6 Generator 還可以用於實現多個依賴的異步調用，其中每個後續操作都依賴於前一個操作返回的值。這可以通過將它們放在一個 Generator 函數中並在需要時執行它來完成。

ECMAScript 6（又名 ECMAScript 2015 或 ES6）為 JavaScript 帶來了許多新特性，使其成為大型應用程序的理想選擇。其中一項特性是使用 Promise 和 Generator 更好地支持異步編程。另一項是增加了 Fetch API，旨在取代 XMLHttpRequest 成為與遠程資源通信的基礎。

Fetch API 的方法返回 ES6 Promise 對象，這些對象可以與 Generator 結合使用，構成複雜異步操作的基礎。這可以是任何東西，從一系列異步操作（其中每個操作都依賴於前一個操作返回的值）到必須重複向服務器發出異步調用以獲取最新更新的操作。

在本文中，我們將了解如何將 Fetch API 與 Generator 結合使用來構建異步 API。 Fetch API 目前受 Chrome、Opera、Firefox 和 Android 瀏覽器支持。對於不受支持的瀏覽器，我們提供了一個來自 GitHub 的 polyfill。

與往常一樣，本文的代碼可以在我們的 GitHub 存儲庫中找到，文章底部有一個最終技術的演示。

使用 Generator 進行異步操作

提示：如果您需要復習 Generator 的內容及其工作方式，請查看：ECMAScript 2015：Generator 和迭代器

那麼，我們如何使用 Generator 執行異步操作呢？好吧，如果我們分析 Generator 的工作方式，我們就會找到答案。

實現迭代器的 Generator 函數具有以下結構：

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

yield 關鍵字負責返回結果並暫停迭代器函數的執行，直到下次調用它為止。它還保留函數的狀態，而不是在下次調用時重新運行所有內容，有效地記住它上次離開的地方。

我們可以將上述函數重新設想為沒有 while 循環的形式：

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

在上述兩種情況下，函數的行為是相同的。使用 yield 關鍵字的唯一原因是暫停函數的執行，直到下一次迭代（這本身似乎有點異步）。由於 yield 語句可以返回任何值，我們也可以返回 Promise 並使函數運行多個異步調用。

將 Generator 與 Fetch API 結合使用

提示：有關 Fetch API 的複習，請查看：Fetch API 簡介

如前所述，Fetch API 旨在取代 XMLHttpRequest。這個新的 API 提供了對 HTTP 請求各個部分的控制，並返回一個 Promise，該 Promise 根據服務器的響應而解析或拒絕。

長輪詢

Fetch API 和 Generator 可以一起使用的用例之一是長輪詢。長輪詢是一種技術，其中客戶端不斷向服務器發送請求，直到獲得響應。在這種情況下，可以使用 Generator 不斷產出響應，直到響應包含數據為止。

為了模擬長輪詢，我在示例代碼中包含了一個 Express REST API，該 API 在五次嘗試後響應城市的實時天氣信息。以下是 REST API：

function *myIterator(){
  //计算值 1
  yield value1;

  //计算值 2
  yield value2;
  ...

  //计算值 n
  yield valuen;
}

現在，讓我們編寫一個 Generator 函數，該函數多次調用此 API 並在每次迭代時返回一個 Promise。在客戶端，我們不知道在多少次迭代後我們將從服務器獲取數據。因此，此方法將具有一個無限循環，每次迭代都會 ping 服務器並在每次迭代時返回 Promise。以下是此方法的實現：

var polls=0;

app.get('/api/currentWeather', function(request, response){
  console.log(polls, polls < 5);
  if(polls < 5){
    polls++;
    response.send({});
  } else {
    response.send({temperature: 25});
  }
});

我們需要一個函數來不斷調用此函數並檢查 Promise 解析後值是否存在。它將是一個遞歸函數，調用 Generator 的下一次迭代，並且只有在找到從 Generator 返回的值時才會停止該過程。以下代碼片段顯示了此方法的實現以及調用此方法的語句：

function *pollForWeatherInfo(){
  while(true){
    yield fetch('/api/currentWeather',{
      method: 'get'
    }).then(function(d){
      var json = d.json();
      return json;
    });
  }
}

正如我們在這裡看到的，對函數 runPolling 的第一次調用創建了 Generator 對象。 next 方法返回一個帶有 value 屬性的對象，在我們的例子中，它包含 fetch 方法返回的 Promise。當此 Promise 解析時，它將包含一個空對象（如果 polls 變量小於 5 則返回），或包含所需信息的另一個對象。

接下來，我們檢查此對象的 temperature 屬性（這將表示成功）。如果它不存在，我們將 Generator 對像傳遞回下一個函數調用（以免丟失 Generator 的狀態），或者我們將對象的值打印到控制台。

要查看它的實際效果，請從我們的存儲庫中獲取代碼，安裝依賴項，啟動服務器，然後導航到https://www.php.cn/link/494ad0d24e15c7da81c7ea265c7f4cb4 shell中看到以下結果：

0 true sending...empty 1 true sending...empty 2 true sending...empty 3 true sending...empty 4 true sending...empty 5 false sending...object

以及打印到瀏覽器控制台的對象本身。

多個依賴的異步調用

通常，我們需要實現多個依賴的異步調用，其中每個後續異步操作都依賴於前一個異步操作返回的值。如果我們有一組這樣的操作並且它們必須多次調用，我們可以將它們放在一個 Generator 函數中並在需要時執行它。

為了演示這一點，我將使用 GitHub 的 API。此 API 使我們可以訪問有關用戶、組織和存儲庫的基本信息。我們將使用此 API 獲取對組織的隨機存儲庫的貢獻者列表並在屏幕上顯示獲取的數據。

為此，我們需要調用三個不同的端點。以下是需要執行的任務：

• 獲取組織的詳細信息
• 如果組織存在，則獲取組織的存儲庫
• 獲取其中一個組織存儲庫（隨機選擇）的貢獻者

讓我們創建一個圍繞 Fetch API 的包裝函數，以避免重複編寫代碼來創建標頭和構建請求對象。

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

以下函數使用上述函數並在每次調用時產生一個 Promise：

function *myIterator(){
  //计算值 1
  yield value1;

  //计算值 2
  yield value2;
  ...

  //计算值 n
  yield valuen;
}

現在，讓我們編寫一段邏輯來調用上述函數以獲取 Generator，然後使用從服務器獲得的值來填充 UI。由於對 Generator 的 next 方法的每次調用都會返回一個 Promise，我們將不得不鏈接這些 Promise。以下是使用上述函數返回的 Generator 的代碼框架：

var polls=0;

app.get('/api/currentWeather', function(request, response){
  console.log(polls, polls < 5);
  if(polls < 5){
    polls++;
    response.send({});
  } else {
    response.send({temperature: 25});
  }
});

(此處省略了Demo部分，因為無法在Markdown中呈現CodePen)

結論

在本文中，我演示瞭如何將 Fetch API 與 Generator 結合使用來構建異步 API。 ECMAScript 6 將為該語言帶來大量新特性，尋找創造性的方法來組合它們並利用它們的力量通常會帶來出色的結果。但你怎麼看？這是我們可以立即在我們的應用程序中開始使用的一種技術嗎？我很想在評論中聽到您的想法。

(此處省略了FAQ部分，因為內容與前面已有的信息高度重複)

以上是使用FETCH API和ES6發電機的異步API的詳細內容。更多資訊請關注PHP中文網其他相關文章！