Реагировать - нужно вызывать окончательный API, только если все файлы загружены - PullRequest
Новая
       73

Реагировать - нужно вызывать окончательный API, только если все файлы загружены

0 голосов
/ 18 апреля 2020

У меня кнопка массовой загрузки файлов. То, что я сейчас делаю, это наличие всех файлов в const fileContents, и я перебираю каждый файл и вызываю api 

const fileContents = data.target.files;
      fileContents.forEach(file => {
        const data = new FormData();
        data.append('file', file);
        dispatch(UploadDispatcher(data));
      });
    }

и в редуктор получает файл и вызывает загрузку API 

export const UploadDispatcher = data => dispatch => {
  performPost(UPLOAD_ENDPOINT, data)
    .then(response => {
      if (response.status === 200) {
        dispatch({
          type: GET_UPLOADED,
          payload: response,
        });

      } 
    })
    .catch(err => {
      dispatch({ type: ERROR, payload: err });

    });
};

и в диспетчере GET_UPLOADED и делает переменную true 

    case GET_UPLOADED: {
      return {
        ...state,
        successToast: true,
        uploaded: true,
      };
    }

, а в компоненте получает эту переменную и использует useEffect 

  useEffect(() => {
    if (uploaded) {
      callListApi();
    }
  }, [uploaded]);

Но проблема в том, что если есть 5 файлов, то после первой загрузки самого файла создание переменной true и вызов callListApi .it не должно произойти, после того, как все 5 загруженных файлов только, он должен сделать флаг true и API списка вызовов (поскольку загрузка API требует времени, чтобы получить ответ). я слышал об асине c жду и все, но не уверен. кто-нибудь может помочь

Ответы [ 2 ]

3 голосов
/ 18 апреля 2020

Я думаю, что вы можете использовать Promise.all в вашем случае. 

const fileContents = Object.keys(data.target.files).map(key=>data.target.files[key]);
dispatch(UploadDispatcher(fileContents));

export const UploadDispatcher = data => dispatch => {
 let promises = data.map(file=>{

        const formData = new FormData();
        formData.append('file', file);
        return performPost(UPLOAD_ENDPOINT, formData);

  })

    Promise.all(promises).then(response => {

        dispatch({
          type: GET_UPLOADED,
          payload: response,
        });


    })
    .catch(err => {
      dispatch({ type: ERROR, payload: err });

    });
};
1 голос
/ 18 апреля 2020

попробуйте использовать Promise.all . Объедините все свои загрузки в массив, после чего вы сможете дождаться их разрешения с помощью Promise.all.

...