Axios POST 请求在使用 Promise.all 时返回空数组

Question

使用. requests_Promise.all我在这里做错了什么，因为我认为使用axios post方法会返回一个承诺？  const doUpload = async (fileList: FileList) => {    const requests: Array<void | AxiosResponse<any>> = [];    Array.from(fileList).forEach(async file => {      const formData = new FormData();      const blob = new Blob([file]);      formData.append(file.name, blob);      requests.push(        await axios          .post(            'https://jsonplaceholder.typicode.com/posts',            {              ...formData,            },            {              headers: {                'Content-Type': 'multipart/form-data',              },              onUploadProgress: (progressEvent: ProgressEvent) =>                handleUploadProgress(progressEvent, file.lastModified),            }          )          .catch(error => {            handleUploadError(file.lastModified);          })      );    });    try {      const data = await Promise.all(requests);      console.dir(data);    } catch (error) {      console.log(error);    }  };

Answer 1

Jeremy 是对的，您await的代码中有不必要的 s，但主要问题是您通过将catch处理程序放在 promise from 上post然后让该处理程序完成而不抛出错误或返回任何内容来隐藏 promise 拒绝。这将拒绝变成了价值的实现undefined。

删除catch处理程序（可能）或让它返回一些你可以用来知道post失败的东西。

FWIW，这是一个执行上述操作并使用 的Array.from映射功能的示例（因为您正在进行映射操作）；看评论：

const doUpload = async (fileList: FileList) => {

  // Use `map`

  const requests = Array.from(fileList, file => {

    const formData = new FormData();

    const blob = new Blob([file]);

    formData.append(file.name, blob);

    // No need for `await` here

    return axios.post(

      'https://jsonplaceholder.typicode.com/posts',

      {

        ...formData,

      },

      {

        headers: {

          'Content-Type': 'multipart/form-data',

        },

        onUploadProgress: (progressEvent: ProgressEvent) =>

          handleUploadProgress(progressEvent, file.lastModified),

      }

    );

    // No `.catch` here (or have one, but make it return something useful

  });

  try {

    const data = await Promise.all(requests);

    console.dir(data);

  } catch (error) {

    console.log(error);

  }

};

如果你需要handleUploadError在那里的某个地方打电话，你可能会考虑使用Promise.allSettled（相对较新的）而不是Promise.all然后调用它来为它给你的数组中的任何被拒绝的承诺。

---

...当使用 Promise.all 解析时。

只是一个旁注：使用Promise.all不会“解决”您传递给它的承诺。它只是观察他们发生了什么。Promise.all承诺会解决，但无论您使用与否，它们都会解决。

一些可能有用的承诺术语：

• fulfill - 将 promise 状态从pending更改为fulfilled并具有特定的fulfillment 值

• reject - 将 promise 状态从pending更改为rejected并给出特定的拒绝原因

• resolve - 直接（通过履行或拒绝）或间接（通过使其结果取决于另一个承诺的结果）来确定承诺的最终结果

Answer 2

您正在将已解决的承诺推送到您的数组 ( requests.push(await axios.post()))。只需推送 Promises 而无需等待它们（requests.push(axios.post())）。然后就Promise.all可以做它的工作了。

const doUpload = async(fileList: FileList) => {

    const requests: Array < void | Promise<any> > = [];

    Array.from(fileList).forEach( file => {

        const formData = new FormData();

        const blob = new Blob([file]);

        formData.append(file.name, blob);

        requests.push(axios.post(/* ... */ ));

    });

    try {

        const data = await Promise.all(requests);

        console.dir(data);

    } catch (error) {

        console.log(error);

    }

};