异步等待获取未定义.怎么处理? [英] async await fetch undefined. How to handle?

问题描述

我目前正在学习async await fetch，并且创建了以下示例来帮助我学习.

I am currently learning async await fetch and I've created the following example to help me learn.

下面的工作示例:

1. 从公共API提取三个随机json记录
2. 从每个返回值json提取url
3. 创建三个img元素
4. 在文档正文中添加三个img元素.

1. fetches three random json records from a Public API
2. extracts the url from each return json
3. creates three img elements
4. appends three img elements to the document body.

请注意，promise2的故意设置的错误路径会强制设置为http状态404.

Notice that promise2 has an intentionally wrong path set to force a http status 404.

如果这三个诺言中的任何一个发生了错误，我该如何处理?

How do I handle this error if it was to happen to any of the three promises?

// the big promise.
  async function getAsyncData() {

    try {

      // attempt to resolve 3 individual unrelated promises...
      let promise1  = await fetch('https://dummyimage.com/48x48/4caf50/ffffff.jpg&text=.jpg');
      let promise2  = await fetch('https://dummyimage.com/bad/url/here/48x48/e91e63/ffffff.png&text=.png');
      let promise3  = await fetch('https://dummyimage.com/48x48/00bcd4/ffffff.gif&text=.gif');

      // we create an html img element and set its src attribute to the thumbnailUrl...
      var img = document.createElement('img');
      img.src = promise1.url;
      // ...and add it to our html document body...
      document.body.append(img);

      // we create an html img element and set its src attribute to the thumbnailUrl...
      var img = document.createElement('img');
      img.src = promise2.url;
      // ...and add it to our html document body...
      document.body.append(img);

      // we create an html img element and set its src attribute to the thumbnailUrl...
      var img = document.createElement('img');
      img.src = promise3.url;
      // ...and add it to our html document body...
      document.body.append(img);

    } catch (error) {

      console.log('Try/Catch block error:', error);

    }

    // return {


    // }

  }

  getAsyncData();

推荐答案

使用Promise.allSettled，您可以并行运行所有访存调用并等待它们完成.

Using Promise.allSettled you can run all the fetch calls in parallel and wait for them all to complete.

const test = async() => {
  const promise1  = await fetch('https://dummyimage.com/48x48/4caf50/ffffff.jpg&text=.jpg')
    .then(r => r.url)

  const promise2  = await fetch('https://dummyimage.com/bad/url/here/48x48/e91e63/ffffff.png&text=.png')
    .then(r => r.url)

  const promise3  = await fetch('https://dummyimage.com/48x48/00bcd4/ffffff.gif&text=.gif')
    .then(r => r.url)

  const results = await Promise.allSettled([promise1, promise2, promise3])

  console.log(results);

}

test();

对于较早的支持，您将需要使用一个promise，该promise会捕获提取中的所有错误.

For older support you would need to use a promise that would catch any errors from the fetch.

function makeCall () {
  return new Promise((resolve) => {
    fetch('https://dummyimage.com/48x48/4caf50/ffffff.jpg&text=.jpg')
    .then(r => console.log(r.url))
    .catch(error => resolve({ error }))
  })
}

const test = async() => {
  const promise1 = makeCall()
  const promise2 = makeCall()
  const promise3 = makeCall()

  const results = await Promise.all([promise1, promise2, promise3])

  console.log(results)

}

test()

这篇关于异步等待获取未定义.怎么处理?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！