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) => {&nbsp; &nbsp; const requests: Array < void | Promise<any> > = [];&nbsp; &nbsp; Array.from(fileList).forEach( file => {&nbsp; &nbsp; &nbsp; &nbsp; const formData = new FormData();&nbsp; &nbsp; &nbsp; &nbsp; const blob = new Blob([file]);&nbsp; &nbsp; &nbsp; &nbsp; formData.append(file.name, blob);&nbsp; &nbsp; &nbsp; &nbsp; requests.push(axios.post(/* ... */ ));&nbsp; &nbsp; });&nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; const data = await Promise.all(requests);&nbsp; &nbsp; &nbsp; &nbsp; console.dir(data);&nbsp; &nbsp; } catch (error) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; }};