TypeScript 如何在 TypeScript 中使用 fetch

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

什么是 fetch 函数？

fetch 是一个现代的网络请求 API，用于在浏览器中进行网络通信。它是基于 Promise 的，可以发送 HTTP 请求并接收响应。fetch 函数返回一个 Promise 对象，可以通过链式调用来处理响应数据。

TypeScript 中使用 fetch 的基本示例

首先，我们需要在 TypeScript 项目中安装 fetch 的类型声明文件：

npm install @types/fetch --save-dev

然后，在 TypeScript 文件中引入 fetch 函数：

import fetch from 'node-fetch';

接下来，我们可以使用 fetch 函数发送一个 GET 请求，并处理响应数据：

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

上述示例中，我们发送了一个 GET 请求到 https://api.example.com/data，并使用 response.json() 方法将响应数据转换为 JavaScript 对象。然后，我们使用 console.log 打印出响应数据。如果出现错误，我们使用 console.error 打印错误信息。

发送 POST 请求

除了发送 GET 请求，我们还可以使用 fetch 发送 POST 请求。我们可以在请求中包含请求头、请求体等信息。

const requestOptions: RequestInit = {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: 'example', password: 'password' }),
};

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

上述示例中，我们首先定义了一个名为 requestOptions 的对象，包含了请求的方法、请求头和请求体。然后，我们将该对象作为第二个参数传递给 fetch 函数。在这个例子中，我们发送了一个 POST 请求到 https://api.example.com/login，并将包含用户名和密码的 JSON 数据作为请求体。

处理错误和超时

在实际应用中，我们需要对网络请求中可能出现的错误进行处理，并设置超时时间来控制请求时间。

const requestOptions: RequestInit = {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' },
  timeout: 5000, // 超时时间为 5 秒
};

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

上述示例中，我们首先在 requestOptions 对象中设置了超时时间为 5 秒。当请求超过设定的超时时间，将触发 catch 中的错误处理。

使用 async/await 进行异步请求

除了使用 Promise 的链式调用，还可以使用 async/await 进行网络请求的异步处理。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

上述示例中，我们定义了一个名为 fetchData 的异步函数，并使用 async/await 来处理网络请求。在 try 块中，我们使用 await 关键字来等待 fetch 函数返回 Promise 对象，并使用 response.json() 方法处理响应数据。在 catch 块中，我们捕获可能出现的错误，并进行处理。

总结

在本文中，我们介绍了如何在 TypeScript 中使用 fetch 函数进行网络请求。我们学习了如何发送 GET 和 POST 请求，如何处理错误和超时，以及如何使用 async/await 进行异步网络请求。使用 fetch 函数可以方便地进行网络通信，并且能够与 Promise 和 async/await 一起使用，使代码更加易读和可维护。希望本文对你在 TypeScript 中使用 fetch 函数有所帮助！