JavaScript 和 Typescript 中的 Promise

發布時間：2023-07-02 22:34:53 作者：網友整理

厭倦了理清 JAVAScript 或 TypeScript 項目中的異步代碼？

您是否希望有一種方法可以使您的異步進程像運轉良好的機器一樣運行？如果是這種情況，我們為您提供了一個解決方案：promises - 任何出色的異步配方中的關鍵成分。它們讓您以更有序和更易于理解的方式管理異步操作，讓您專注于編碼的更有趣的方面。我們將在本文中帶您游覽狂野而美麗的promises世界。

什么是promise？

什么是承諾？

在 JavaScript 中，promise 是一種以更有條理、更易于理解和更簡潔的方式處理異步操作的方法。它們使您能夠構建以可預測的順序方式運行的代碼，即使操作本身是并行發生的。

Promise 是通過將函數作為參數傳遞給 Promise 構造函數來創建的。這個函數被稱為執行函數，它負責執行異步操作。執行函數有兩個參數：resolve 和 reject。這些功能用于履行（解決）或拒絕承諾。

以下面的例子為例，其中一個承諾是用一個等待 3 秒的執行函數創建的，然后用“Hey!My name is Bruno.”的值解析promise：

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hey!My name is Bruno.");
  }, 3000);
});

在創建承諾后，您可以使用 then() 方法來告訴它在解決或拒絕時做什么。作為參數，它需要兩個函數：一個用于 resolve 分支，一個用于 refuse 分支。

考慮以下場景，其中 resolve 分支打印消息“Hey！My name is Bruno.”，而 reject 分支在另一方面記錄一條錯誤消息：

myPromise.then(
  (message) => {
    console.log(`The promise has been resolved: ${message}`)
  },
  (error) => {
    console.log(`The promise has been rejected: ${error}`)
  }
);

? 鏈接promises

鏈接promise允許您創建一系列異步操作，這些操作按順序/一個接一個地執行。

myPromise
  .then((message) => {
    console.log(message); // Hey!My name is Bruno.
    return message + " I am a software developer."
  })
  .then((message) => {
    console.log(message); // Hey!My name is Bruno. I am a software developer.
  })

上面的prmise是鏈接的，第一個 then() 記錄消息的第一個版本，而第二個 then() 記錄與 return 語句中的字符串連接的消息。

現在讓我們繼續討論 promise 的一些用例。

你可以在哪里使用promise?

在不同的情況和場景中，可以使用 promises 來執行異步操作。

處理 HTTP 請求

可以以一種干凈且易于理解的方式處理 HTTP 請求。我們將使用 AxIOS 庫來說明一個示例，它基本上與已經內置的 fetch() 執行相同的操作：

import axios from "axios";

const API_URL = "dummyapithatdoesnotexist.com/data";

axios.get(API_URL)
  .then((response) => response.json())
  .then((jsonData) => console.log(jsonData)) // data from the API
  .catch((error) => console.log(`There has been an error: ${error}`));

請注意 promise 末尾的“catch()”方法。“catch()”用于處理在嘗試解析 promise 時發生的任何錯誤。它非常有價值，也是異步操作的一個重要方面，因為它提供了為什么它們沒有成功的上下文（例如，當沒有互聯網連接或服務器關閉時）。

當然還有其他場景可以使用 promises，但這個場景很好地說明了一個廣為人知的場景。

JavaScript 和Typescript中的Promise

您現在可能會問自己：但是……JavaScript 和 Typescript 中的 promises 有什么區別？

好吧，當然，這是一個很好的問題，我們現在將討論這個問題。

為了創建承諾，JavaScript 和 TypeScript 都使用 Promise 構造函數，并且兩種語言都使用 then() 方法來指示在解決或拒絕承諾時應該發生什么。

JavaScript 承諾和 TypeScript 承諾之間的一個重要區別是，在 TypeScript 中，您使用更強大的類型檢查，這有助于防止代碼中的錯誤和錯誤。這可以避免在一天結束前一直頭痛的困擾（到底哪里錯了？）。更強的類型允許您聲明 promise 將解析或拒絕的值類型，而 JavaScript 依賴于運行時類型檢查。這是在項目中使用 JavaScript 或 Typescript 時要牢記的一個重要方面。

Typescript 中類型化承諾的示例如下所示：

import axios from "axios";

const API_URL: string = "dummyapithatdoesnotexist.com/data";

const myPromise: Promise<string> = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hey!My name is Bruno.");
  }, 3000);
});

在指定 then() 和 catch() 場景時，您還可以按以下方式鍵入它們：

import axios from "axios";

const API_URL: string = "dummyapithatdoesnotexist.com/data";

axios.get(API_URL)
  .then((response: Response) => response.json())
  .then((jsonData: any) => console.log(jsonData)) // data from the API
  .catch((error: any) => console.log(`There has been an error: ${error}`));

在 Typescript 中，您還可以使用 async 和 await，前者允許您指示操作是異步的，后者會暫停函數的執行，直到 promise 得到解決。

import axios from 'axios';

const API_URL: string = 'dummyapithatdoesnotexist.com/data';

async function getData() {
  try {
    const response: AxiosResponse = await axios.get(API_URL);
    const jsonData: any = response.data;
    console.log(jsonData);
  } catch (error) {
    console.log(`There has been an error: ${error}`);
  }
}

getData(); // logs the data from the API

AxiosResponse 類型是從 axios 庫中導入的，用于鍵入本示例中的響應變量。要從 API 響應中獲取 JSON 數據，請使用 response.data 屬性。 jsonData 變量是 any 類型，表明它可以保存任何類型的值。 error 變量的類型也為 any，暗示它也可能是任何類型。

async 關鍵字將 getData() 函數標識為異步函數，而 await 關鍵字暫停函數的執行，直到承諾得到解決。如果在請求期間發生錯誤，catch() 塊會檢測到錯誤并將其記錄到控制臺。