Question

我想从 array 个网址中提取 100 多张图片。我单独检查了每个 URL 都很好。但是当我从 some URLs 的代码中获取它时，我收到了这个错误

GET https://image-url net::ERR_HTTP2_PROTOCOL_ERROR 200

这是我的代码

var imageUrls = [//contains more than 100 urls];

Promise.all(imageUrls.map(image => {
  fetch(image).then(res => {
    //this console log gives every response correctly
    console.log(res.blob());
  });
})).then(imageBlobs => {
  //do something here
});

我也试过这个

var imageUrls = [//contains more than 100 urls];

let counter = 0;
imageUrls.forEach(function(image, i){

  let imageBlob = fetch(image).then(res => res.blob());
  
  console.log(imageBlob);
  
  counter ++;
  
  if(counter == imageUrls.length){
    // do something
  }
});

还有这个

var imageUrls = [//contains more than 100 urls];

Promise.all(imageUrls.map(image => {

  console.log(fetchImage(image));
  
})).then(imageBlobs => {
  //do something here
});

async function fetchImage(url){
  return await fetch(url).then(res => res.blob());
}

但在这段代码中，我也得到了 TypeError : failed to fetch。

我认为这可能是某种循环问题，因为 loop 执行速度很快，但 fetch() 无法如此快速地处理 URL。

谁能告诉我如何解决这个问题？

Answer 1

我在您的代码中发现了一些缺陷：

代码片段 1：通过使用 console.log(res.blob());，您正在使用响应正文，并且不会将其传递给下一个“.then()”。此外， res.blob() 是一个异步函数。所以你必须等待它或者在它上面使用 .then() ！

代码片段 2：与 1 和这一行相同 let imageBlob = fetch(image).then(res => res.blob()); 应该是这个 let imageBlob = await fetch(image).then(res => res.blob());。此外，通过使用 .forEach() 您可以同时获取所有 100 张图像！您正在同步循环中执行异步函数，而不是等待它结束。

代码片段 3：与 1 相同。console.log(fetchImage(image)); 应该至少是 console.log(await fetchImage(image)); 或者因为您要将它传递给下一个。那么它应该是 return fetchImage(image);

编辑：您是否遇到了 CORS 错误？我刚看到一个 thread 有类似的问题。

fetch api 为某些 url 提供 GET "url" net::ERR_HTTP2_PROTOCOL_ERROR 200

1 个答案: