React 一个接一个地发出多个 fetch 请求 - TypeScript

在 React 中，我们经常需要使用 fetch 来获取服务器返回的数据。但有时需要连续发出多个不同的 fetch 请求，这时我们该如何处理？本篇文章将为大家介绍如何使用 TypeScript 实现 React 中连续发出多个 fetch 请求。

准备工作

要在 React 中发出多个 fetch 请求，我们首先需要安装 isomorphic-fetch 库。该库可以让我们在服务器端和客户端上都使用 fetch。我们可以通过以下命令安装它：

npm install isomorphic-fetch --save

除此之外，我们还需要安装 node-fetch 库，它是 isomorphic-fetch 库的一个依赖项。

npm install node-fetch --save

发出多个 fetch 请求

我们可以使用 Promise.all 来发出多个 fetch 请求。 Promise.all 接收一个 promise 数组作为参数，返回一个新的 promise。当所有 promise 都完成时，新的 promise 才会完成。

我们首先编写一个接口函数，它用于返回一个 promise，该 promise 表示一个 fetch 请求。在代码中，我们使用 TypeScript 来确保传入的 URL 和返回的数据类型都正确。

interface IData {
  id: number;
  title: string;
  body: string;
}

async function fetchPostData(url: string): Promise<IData> {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

然后我们可以通过以下代码来发出多个 fetch 请求：

async function fetchMultiPosts(posts: Array<number>): Promise<Array<IData>> {
  const promises = posts.map((post) => fetchPostData(`https://jsonplaceholder.typicode.com/posts/${post}`));
  return Promise.all(promises);
}

在这段代码中，我们使用了 Array.map 方法来将需要获取的 post ID 映射到一个 promise 数组中，并将该数组作为 Promise.all 的参数。在最终的返回值中，我们使用了 TypeScript 来明确表示该函数返回一个 promise 数组，其中包含多个 IData 类型的数据。

使用示例

我们可以使用以下代码来测试我们的函数：

async function testFetchMultiPosts() {
  const posts = [1, 2, 3, 4, 5];
  const data = await fetchMultiPosts(posts);
  console.log(data);
}

testFetchMultiPosts();

在控制台中，我们应该能够看到以下输出：

[
  {
    userId: 1,
    id: 1,
    title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
    body: 'quia et suscipit\nsuscipit ...'
  },
  {
    userId: 1,
    id: 2,
    title: 'qui est esse',
    body: 'est rerum ...'
  },
  ...
]

总结

在 React 中发出多个 fetch 请求并不难，我们只需要使用 Promise.all 即可。本文中，我们介绍了如何使用 TypeScript 来确保传入的参数和返回的数据类型都正确。希望这篇文章能够对大家有所帮助！