需要指导！尝试了解 fetch() 和 Promises

Question

基本上我正在尝试使用 firebase 函数 /storeImage 和 JSON.Stringify() 获取我上传（到 Firebase）的两张图片的 URL 和 URL 路径.

下面的代码片段使我能够获取 ONE 图像的数据。

.then(token => {
    authToken = token;
    return fetch("myappURL/storeImage", 
     {
       method: "POST",
       body: JSON.stringify({
       image: image.base64
       }),
       headers: {
         Authorization: "Bearer " + authToken,
       }
      });
    })
    .catch(err => {
        console.log(err);
        alert("Oops! Something went wrong, please try again1")
        dispatch(uiStopLoading());
    })
.then(res => {
        if (res.ok) {
            return res.json();
        } else {
            throw(new Error());
        }
    })
.then(parsedRes => {console.log(parsedRes);

现在我想从第二张图片中获取数据。

我从阅读过的文档中收集到的是，我应该像上面那样对多个异步调用使用 promises。那么，这样的事情（见下文）不应该起作用吗？

.then(token => {
    authToken = token;

    let image =  fetch(... image: image.base64 ...);
    let coverImage = fetch(... coverImage: coverImage.base64 ...);

    Promise.all([image, coverImage])
    .then(ress => { ress.forEach(
      res => {
        process( res.json() ); 
   })
})
.catch(err => {...})
.then(res => {...})
.then(parsedRes => {console.log(parsedRes);)

剧透警告。我试过了，但没有。但是我不明白为什么。

Answer 1

当您将 promise 链接在一起时，即在 then 回调中开始一个新的 promise，您需要 return 它。

Promise.all return 是一个新的承诺，当所有传递给它的承诺解决时解决。在上面的代码中，您忽略了 return 它。

例如试试运行这个记录 undefined

的代码

Promise.resolve()
  .then(() => {
    Promise.all([Promise.resolve(1), Promise.resolve(2)])
  })
  .then(result => console.log(result))

vs 记录 [1, 2]

的代码

Promise.resolve()
  .then(() => {
    return Promise.all([Promise.resolve(1), Promise.resolve(2)])
  })
  .then(result => console.log(result))

需要指导！尝试了解 fetch() 和 Promises

Need guidance! Trying to learn about fetch() and Promises

javascript

git-fetch

promise

firebase

react-native