如何动态创建和链接 fetch api 调用？

Question

在用户提交表单后我的应用程序中，我可以访问一组图像，我需要调用我们的后端以将他们上传的所有照片保存到我们的云服务器。

我们的 /upload api 端点一次拍摄一张图像。我如何为这个数组中的每个图像创建一个 api 调用并将它们链接起来一个接一个地发生？我在想我可以以某种方式使用 reduce 来做到这一点，但我不是 100% 确定如何去做。

以下是我发出 api 单张图片上传请求的方式：

    const api = "https://appName.herokuapp.com/upload";
    const uri = photos[0];
    const formData = new FormData();

    formData.append('image', {
      uri,
      name: `photo.jpg`,
      type: `image/jpg`,
    });

    const options = {
      method: 'POST',
      body: formData,
      headers: {
        Authorization:`Basic ${base64.encode(BACKEND_AUTHENTICATION_HEADER)}`,
        Accept: 'application/json',
        'Content-Type': 'multipart/form-data',
      },
    };

    fetch(api, options)
      .catch((e) => console.log(e))
      .then((response) => {
        console.log(response);
      })

Answer 1

如果您使用的是 redux，您可以这样做：

创建要上传的图片数组
创建一个上传图片的动作，该动作以索引为参数，并会递归调用自身以获取以下所有索引
调用您的操作时传入索引 0 并且操作可以从该点递归上传所有图像

这背后的逻辑：

imagesArray: [ image1, image2, image3 ]; // each image is an object

像这样调用你的操作：

store.dispatch(Actions.recursivelyUploadImages(0, imagesArray));
// If your action is defined outside of your current scope
// you can either bind it or pass in the imagesArray

那么您的操作将被定义为：

recursivelyUploadImages(index, array) {
  // construct/define your api/options here
  fetch(api, options)
      .catch((e) => console.log(e))
      .then((response) => {
        console.log(response);
        if (index < array.length - 1) {
          // call recursiveUploadImages(index+1, array);
        }
      })
}

我现在不知道这是不是一个好的解决方案，我对react和redux的了解非常有限，我只能以我目前的经验来考虑这种解决方案。

Answer 2

使用 Promise.All，您应该能够触发多个 API 调用并等待所有调用都解决。 Promise.all 传递给 then() 的函数接收一个包含结果的数组。例如：

Promise.all([/*Array of promises*/]).then(function(results){
    //Results is an array
}).catch(function(error){
    //Handle errors
}

这是一个 jsFiddle：http://jsbin.com/yuqabizado/2/edit?html,js,output

编辑： - 删除了关于 Promise.all 兼容性问题的评论。感谢@zvona 指出这一点。

如何动态创建和链接 fetch api 调用？

How to dynamically create and chain fetch api calls?

javascript

react-native

fetch-api