TypeScript 如何在 TypeScript 中使用 fetch

在本文中，我们将介绍如何在 TypeScript 中使用 fetch 进行网络请求。

什么是 fetch

fetch 是一种用于进行网络请求的现代 API，它可用于请求数据、文件等资源，并通过 Promise 返回响应结果。fetch API 提供了一种更简单、更强大、更灵活的方法来执行网络请求。

基本用法

要在 TypeScript 中使用 fetch，首先需要安装 TypeScript 以及相关的类型定义。在项目根目录下执行以下命令：

npm install typescript
npm install @types/whatwg-fetch

安装完成后，可以在 TypeScript 文件中使用 fetch 了。以下是一个简单的示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

上述示例中，我们通过 fetch 方法发送了一个 GET 请求，并将返回的响应转换成 JSON 格式。然后使用 Promise 语法处理异步操作的结果。如果请求成功，我们打印出响应数据；如果请求失败，则打印出错误信息。

发送 POST 请求

除了发送 GET 请求，我们还可以使用 fetch 发送 POST 请求。通过给 fetch 方法传递一个配置对象，我们可以指定请求方法为 POST，同时传递请求数据。以下是一个示例：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'Alice', age: 20 })
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

上述示例中，我们指定了请求方法为 POST，并设置请求头的 Content-Type 为 application/json。我们通过 JSON.stringify 将一个对象转换成 JSON 字符串，并将其作为请求体发送给服务器。

处理错误

在使用 fetch 进行网络请求时，可能会遇到一些错误，比如网络连接失败、服务器返回错误等。为了处理这些错误，我们可以使用 catch 方法来捕获错误。以下是一个示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });