React-原生Promise.all和多个应用编程接口请求

基础概念

React 是一个用于构建用户界面的 JavaScript 库，而 Promise 是 JavaScript 中处理异步操作的一种对象。Promise.all 是 Promise 对象的一个静态方法，它接受一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。当这个数组里的所有 Promise 对象都成功解析（fulfilled）后，返回的 Promise 对象才会解析，并且解析的值是所有 Promise 对象解析值的数组。

类型

Promise.all 是 Promise 的一个静态方法，因此它没有特定的“类型”，但它接受一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。

应用场景

当你需要同时发起多个 API 请求，并且希望在所有请求都完成后处理它们的结果时，Promise.all 非常有用。例如，在 React 应用中，你可能需要从多个后端服务获取数据来渲染组件。

示例代码

import React, { useEffect, useState } from 'react';

function fetchData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  const promises = urls.map(url => fetch(url).then(response => response.json()));

  return Promise.all(promises);
}

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData().then(results => {
      setData(results);
    }).catch(error => {
      console.error('Error fetching data:', error);
    });
  }, []);

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>{JSON.stringify(item)}</div>
      ))}
    </div>
  );
}

export default App;

可能遇到的问题及解决方法

请求失败：如果数组中的任何一个 Promise 失败，Promise.all 会立即失败，并返回第一个失败的 Promise 的错误。解决方法是使用 .catch 来捕获错误，并进行适当的处理。

Promise.all(promises)
  .then(results => {
    setData(results);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
    // 可以在这里进行错误处理，例如重试请求或者显示错误信息
  });

请求超时：如果某个请求耗时过长，可能会导致整个应用等待。解决方法是设置请求超时，并在超时后取消请求。

function fetchWithTimeout(url, options, timeout = 5000) {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Request timed out')), timeout)
    )
  ]);
}

const promises = urls.map(url => fetchWithTimeout(url).then(response => response.json()));