Home > Web Front-end > JS Tutorial > body text

async/await parallel requests and error handling

不言
Release: 2018-07-07 17:57:21
Original
2460 people have browsed it

This article mainly introduces about async/await parallel requests and error handling, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

async sequence

Concurrent requests

When using async, the order of code execution is easy to make mistakes. For example, if we want to initiate two requests at the same time, we may write the following code

function fetchName () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('lujs')
    }, 3000)
  })
}

function fetchAvatar () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('https://avatars3.githubusercontent.com/u/16317354?s=88&v=4')
    }, 4000)
  })
}

async fetchUser () {
  const name = await fetchName()
  const avatar = await fetchAvatar()
  return {
    name,
    avatar
  }
}

(async function () {
  console.time('should be 7s ')
  const user = await fetchUser()
  console.log(user)
  console.timeEnd('should be 3s ')
})()
Copy after login

In the above code , we think that fetchName, fetchAvatar will be executed in parallel, but in fact they will not. fetchAvatar will wait for fetchName to be executed before starting the request. The execution time of the fetchUser function is not three seconds but 7 seconds.

If you want to make parallel requests, you need to write as follows. The execution time of fetchUserParallel is 4 seconds.

async function fetchUserParallel () {
  const namePromise = fetchName()
  const avatarPromise = fetchAvatar()
  return {
    name: await namePromise,
    avatar: await avatarPromise 
  }
}
(async function () {
  console.time('should be 3s, but time is ')
  const user = await fetchUser()
  console.log(user)
  console.timeEnd('should be 3s, but time is ')

  console.time('should be 3s : ')
  const user2 = await fetchUserParallel()
  console.log(user2)
  console.timeEnd('should be 3s : ')
})()
Copy after login

Use Promise.all to make concurrent requests

function fetchList (id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`id is : ${id}`)
    }, 5000)
  })
}

async function getList () {
  const ary = [1, 2, 3, 4]
  const list =  Promise.all(
    ary.map(
      (id) => fetchList(id)))
  return await list
}
(async function () {
  // 使用promise并发请求
  console.time('should be 3s ')
  const list = await getList()
  console.log(list)
  console.timeEnd('should be 3s ')
})()
Copy after login

Error acquisition

Use try...catch

  try {
    const user3 = await fetchUser(true)
  } catch (err) {
    console.error('user3 error:', err)
  }
Copy after login

Wrap promise so that it returns a unified format of code

Reference article

  /**
   * 包装promise, 使其返回统一的错误格式
   * @param {Promise} promise 
   */
  function to (promise) {
    return promise.then(res => [null, res]).catch(err => [err])
  }
  .
  .
  .
  const [err, res] = await to(fetchUser(true))
  if (err) {
    console.error('touser err:', err)
  }
Copy after login

Continue to use catch

  // 因为async 返回的promise对象,所以可以使用catch
  const user4 = await fetchUser(true).catch(err => {
    console.error('user4 error:', err)
  })
Copy after login
If you are interested, you can run the code.
Test code

The above is the entire content of this article. I hope it will be helpful to everyone's learning. , please pay attention to the PHP Chinese website for more related content!

Related recommendations:

node crawls Lagou.com data and exports it as an excel file

Native JS is based on window. scrollTo() encapsulates the vertical scrolling animation tool function

## Similarities and differences between browsers and NodeJS’s EventLoop and partial machines

The above is the detailed content of async/await parallel requests and error handling. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template