promise.allsettled 发送多个mtop请求 react 怎么写

如果要在 React 中发送多个 mtop 请求，并使用 Promise.allSettled() 方法来等待所有请求完成，可以按照以下步骤操作：

1. 安装 mtop-sdk，可以使用 npm 进行安装：`npm install mtop-sdk --save`。

2. 在组件中使用 mtop-sdk 发送多个请求。可以将请求的参数存储在一个数组中，并使用 Array.map() 方法将它们转换为 Promise 对象，然后将这些 Promise 对象传递给 Promise.allSettled() 方法。示例代码如下：

import React, { useEffect, useState } from "react";
import Mtop from "mtop-sdk";

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

  async function fetchData() {
    const apiList = [
      {
        api: "api1",
        v: "1.0",
        data: { id: 1 }
      },
      {
        api: "api2",
        v: "1.0",
        data: { id: 2 }
      },
      {
        api: "api3",
        v: "1.0",
        data: { id: 3 }
      }
    ];

    const promises = apiList.map(api => {
      return new Promise((resolve, reject) => {
        Mtop.request({
          api: api.api,
          v: api.v,
          data: api.data,
          success: response => {
            resolve(response);
          },
          error: error => {
            reject(error);
          }
        });
      });
    });

    const responses = await Promise.allSettled(promises);

    const newData = responses
      .filter(response => response.status === "fulfilled")
      .map(response => response.value.data);

    setData(newData);
  }

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default App;

在上面的代码中，我们首先定义了一个 fetchData() 函数，该函数会发送多个 mtop 请求，并使用 Promise.allSettled() 方法来等待所有请求都完成。然后，我们使用 Array.map() 方法将每个请求的参数转换为一个 Promise 对象，并将这些 Promise 对象存储在 promises 数组中。接下来，我们通过循环调用 Mtop.request() 方法来发送每个请求，并将请求的结果存储在对应的 Promise 对象中。最后，我们使用 Promise.allSettled() 方法来等待所有请求完成，并过滤出已成功解决的 Promise 对象。在处理 responses 数组时，我们首先过滤出已成功解决的 Promise 对象，然后将它们的数据提取出来，并存储在 newData 数组中。最后，我们使用 newData 数组来更新组件的状态，从而渲染数据。

需要注意的是，Mtop.request() 方法是一个异步方法，因此我们需要将它封装在一个 Promise 对象中，以便它可以与其他 Promise 对象一起被 Promise.allSettled() 方法等待。在处理 responses 数组时，我们可以通过检查 Promise 对象的 status 属性来确定该 Promise 对象是解决（fulfilled）还是拒绝（rejected），并提取对应的数据。