Javascript React 和 Redux 和 Axios 中 API 的并行顺序调用

我需要确定是否需要顺序或并行上传照片(调用Upload API).

顺序是指在上传图片时(调用Upload接口)，等待第一个图片解析完成后显示图片，然后再调用下一个上传接口.

并行意味着当您上传图像时，您将首先显示任何已解析的图像.因此，您可以同时显示图像，因为可以在此处解析多个响应.

我想要有一个条件，即在一个条件中是连续的还是并行的 uploadPhotos个动作. 条件是当它包含相同的文件名时使用顺序，例如，如果您上传AA_11-01.jpg，则您上传AA_11-02.jpg，否则使用并行.

永远记住，只确定它是否在过go -xxx年之前

例如.

aa_11-01.jpg        -      aa_11
aa-11-01.jpg        -      aa-11
aa.jpg              -      aa
aa-12j-14kkk.jpg    -      aa-12j
test-a.jpg          -      test
test-b.jpg          -      test

Parallel个

export const uploadPhotos =
  ({ photos, size, controller }) =>
  async (dispatch) => {
    photos.forEach(async (photo, index) => {
      const formData = new FormData();
      formData.append(photo?.imageFileName, photo?.imageFile)

      dispatch({ type: constants.UPLOAD_PHOTOS_START, size });
      try {
        const response = await axios.post(
          `${API_URL}/photos/upload`,
          formData,
          {
            onUploadProgress({ loaded, total }) {
              dispatch(setUploadProgress({ id: index, loaded, total }));
            },
            signal: controller.signal,
          }
        );

        dispatch({
          type: constants.UPLOAD_PHOTOS_SUCCESS,
          payload: response.data,
        });
      } catch (error) {
        dispatch({
          type: constants.UPLOAD_PHOTOS_FAILURE,
          payload: error,
        });
      }
    });
  };

Sequential个

export const uploadPhotos =
      ({ photos, size, controller }) =>
      async (dispatch) => {
        for (const [index, photo] of photos.entries()) {
          const formData = new FormData();
            formData.append(photo?.imageFileName, photo?.imageFile)
    
          dispatch({ type: constants.UPLOAD_PHOTOS_START, size });
          try {
            const response = await axios.post(
              `${API_URL}/photos/upload`,
              formData,
              {
                onUploadProgress({ loaded, total }) {
                  dispatch(setUploadProgress({ id: index, loaded, total }));
                },
                signal: controller.signal,
              }
            );
    
            dispatch({
              type: constants.UPLOAD_PHOTOS_SUCCESS,
              payload: response.data,
            });
          } catch (error) {
            dispatch({
              type: constants.UPLOAD_PHOTOS_FAILURE,
              payload: error,
            });
          }
        }
      };