使用 javascript 同步获取图像

Question

I have an app that generated links to images that have been downloaded.

When I use this code on its own (as in a single uri) it works for what I am wanting to achieve, the image path is dynamically created and the local image is created and I can stored it and reference it elsewhere where I need.

var path = getOS() + '' + object.link + '/' + object.icon
var outside
fetch(path)
   .then(response => response.blob())
   .then(images => {
   outside = URL.createObjectURL(images)  
   localStorage.setItem('stored_img'+ _object.link, outside)
})

The problem is when I try and loop through several images and try to create localStorage links to them. All of the local Storageitems are undefined or null

I suspect that the code is executing before the localstorage is saved. I do not know how to apply the working code to synchronous fetch.

Answer 1

Try creating a map of all requests and use Promise.all to resolve their URLs.

Let's say you have a list of URLs:

const urls = ['url1', 'url2', ...];

Create a map of fetch requests like this:

const requests = urls.map((url) => fetch(url).then(resp => resp.blob()));

Now pass this request map to Promise.all :

Promise.all(requests).then(responseArr => {
  const imagesArr = responseArr.map(image => {
    const url = URL.createObjectURL(image);
    localStorage.setItem('...', url);
    return url;
  });
  // now you have a list of image urls in imagesArr which you can use. They are also stored in localStorage
});