javascript - React 和 Redux 以及 Axios 中 API 的并行/顺序调用

Question

我需要判断是需要顺序上传照片(调用上传API)还是并行上传。

顺序意味着当您上传图片(调用上传 API)时，您等待第一个图片被解析然后显示图片，然后再调用下一个上传 API。

并行意味着当您上传图片时，您会显示首先解析的任何图片。因此您可以同时显示图像，因为这里可以解决多重响应问题。

我想在一个 uploadPhotos 操作中设置顺序或并行的条件。条件是当它包含相同的文件名时使用顺序，比如如果你上传 aa_11-01.jpg 然后你上传 aa_11-02.jpg，否则使用并行。

永远记住只识别它是否在最后一个 -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

并行

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,
        });
      }
    });
  };

顺序

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,
            });
          }
        }
      };

Answer 1

在发出任何请求之前，您可以首先分析文件名并将数组分组为子数组，其中子数组的文件名具有“name-sequence.ext”模式(“sequence”可以是任何内容)。没有此序列部分的文件名将作为子数组中的唯一条目结束。

然后混合两个循环，forEach 作为外层循环，for 作为内层循环:

export const uploadPhotos = 
  ({ photos, size, controller }) =>
  async (dispatch) => {
    // Identify the part of the file name that excludes the (optional) sequence number
    const keyedphotos = photos.map(photo => [photo.imageFileName.replace(/-\w+\.\w+$/, ""), photo]);
    // Create a group for each such prefix
    const map = new Map(keyedphotos.map(([key]) => [key, []]));
    // Populate those groups
    for (const [key, photo] of keyedphotos) map.get(key).push(photo)
    // And extract those groups into an array (of subarrays)
    const photoGroups = [...map.values()];
    let index = 0; // Keep the index counter separate

    photoGroups.forEach(async (photos) => { // Iterate the groups that can run in parallel
      for (const photo of photos) { // Iterate the photos that should run sequentially
        const id = index++; // Get the next unique id
        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, loaded, total })); // Use id
              },
              signal: controller.signal,
            }
          );

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