如何获取（）多个资源？

Question

我有一个指向 json 资源的地址列表。我想下载这些文件以便在以后的处理中使用它们。

我有这段使用 fetch() 方法的代码：

let urlList = [
         "https://url.to/resource1.json",
         "https://url.to/resource2.json"
       ];
  let promiseList = [];
  let jsonBaseList = [];

  urlList.forEach (function (url, i) {
    promiseList.push (
      fetch(url).then (function (res) {
        jsonBaseList[i] = res.json();
      })
    );
  });

  Promise
    .all(promiseList)
    .then (function () {
      console.log('All done.');
    })

console.log('jsonBaseList: ', jsonBaseList)

因此，jsonBaseList 包含promises 的列表。

但我只想要一个 json 对象列表。

有可能吗？

Answer 1

您应该返回 res.json() 并在下一个 .then 中使用解析后的值，因为 Response.json() 返回另一个承诺。

let urlList = [
         "https://url.to/resource1.json",
         "https://url.to/resource2.json"
       ];
  let promiseList = [];
  let jsonBaseList = [];

  urlList.forEach (function (url, i) {
    promiseList.push (
      fetch(url).then (function (res) {
        return res.json();
      }).then(function (res) {
        jsonBaseList[i] = res;
      })
    );
  });

  Promise
    .all(promiseList)
    .then (function () {
      console.log('All done.');
    })

console.log('jsonBaseList: ', jsonBaseList)

更新：我刚刚编辑了您当前的代码以使其正常工作。但你可以写得更好：

let urlList = [
  "https://url.to/resource1.json",
  "https://url.to/resource2.json"
];

let jsonBaseList = [];

const promiseList = urlList.map((url) => {
  return fetch(url)
      .then(response => response.json())
})

Promise.all(promiseList).then(values => {
  jsonBaseList = values;
  console.log('All done.');
})

console.log('jsonBaseList: ', jsonBaseList)

更新：代码末尾的console.log 将输出一个空数组，因为promise 在当前脚本运行后异步运行。所以你可以：

• 放入.then
• 或将其放入链式.then
• 或使用async/await 语法（编写承诺的更简洁的方式）

(async function() {
  let urlList = [
    "https://url.to/resource1.json",
    "https://url.to/resource2.json"
  ];

  const promiseList = urlList.map((url) => {
    return fetch(url)
        .then(response => response.json())
  })

  const jsonBaseList = await Promise.all(promiseList)
  console.log('All done.');
  console.log('jsonBaseList: ', jsonBaseList)
})()

Answer 2

因此，jsonBaseList 包含一个承诺列表。

是的，因为res.json() 返回了一个承诺。但是，当您显示 console.log 时，jsonBaseList 将是 []，因为该代码在任何承诺解决之前运行。

对于jsonBaseList 的代码在承诺解决后运行的代码中包含值的最小更改是：

// ...
// ...
let urlList = [
    "https://url.to/resource1.json",
    "https://url.to/resource2.json"
];
let promiseList = [];
let jsonBaseList = [];

urlList.forEach (function (url, i) {
    promiseList.push (
        fetch(url) .then (function (res) {
            return res.json();
        })
        .then (function (value) {     // ***
            jsonBaseList[i] = value;  // *** This is what I added
        })                            // ***
    );
});

Promise
    .all(promiseList)
    .then (function () {
        console.log('All done.');     // *** Use `jsonBaseList` here
    })

// Removed the `console.log` here that would have logged `[]`

但是它可以简单得多；以上所有内容都可以替换为：

let urlList = [
    "https://url.to/resource1.json",
    "https://url.to/resource2.json"
];
Promise.all(urlList.map(url => fetch(url).then(response => response.json())))
.then(jsonBaseList => {
    // ...use `jsonBaseList` here...
})
.catch(error => {
    // ...handle/report error here...
});

请注意，您在Promise.all 上的then 处理程序中使用了jsonBaseList。我不会在更广泛的范围内声明它，因为在调用该处理程序之前它不会被填充（这就是你最后的console.log 将始终记录[] 的原因）。如果您在更广泛的范围内声明它，您可能会在它可用之前尝试使用它（如问题代码中所示）。

但如果想在更广泛的范围内填写，并且您意识到要等到以后才能填写，请添加：

let jsonBaseList = []; // *** Not filled in until the promises settle!

然后改变

.then(jsonBaseList => {
    // ...use `jsonBaseList` here...
})

到

.then(list => {
    jsonBaseList = list;
})

（或使用const 和jsonBaseList.push(...list)。）

---

旁注：您可能想要处理 HTTP 请求失败的可能性（即使网络请求成功 - 这是我写的关于 here 的 fetch API 中的枪，它不会拒绝 HTTP失败，只是网络故障）。所以：

let urlList = [
    "https://url.to/resource1.json",
    "https://url.to/resource2.json"
];
Promise.all(
    urlList.map(
        url => fetch(url).then(response => {
            if (response.ok) {
                throw new Error(`HTTP error ${response.status}`);
            }
            return response.json();
        })
    )
)
.then(jsonBaseList => {
    // ...use `jsonBaseList` here...
})
.catch(error => {
    // ...handle/report error here...
});

Answer 3

你需要先等待你的承诺完成

await Promise.all(promiseList)
console.log('jsonBaseList: ', jsonBaseList)