집 > 기사 > 웹 프론트엔드 > 비동기/대기 병렬 요청 및 오류 처리

비동기/대기 병렬 요청 및 오류 처리

不言원래의: 2018-07-07 17:57:212451검색

이 글은 주로 async/await 병렬 요청 및 오류 처리에 대해 소개합니다. 이제 특정 참고 가치가 있습니다. 필요한 친구들이 참고할 수 있습니다.

async 시퀀스

동시 요청

예를 들어, 두 개의 요청을 동시에 시작하려면 다음 코드를 작성하면 됩니다.

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 ')
})()

위 코드에서는 fetchName과 fetchAvatar가 실행될 것이라고 생각합니다. 동시에 실행되지만 실제로는 그렇지 않습니다. fetchAvatar는 요청을 시작하기 전에 fetchName이 실행될 때까지 기다립니다. fetchUser 함수의 실행 시간은 3초가 아닌 7초입니다

병렬 요청을 하려면 다음과 같이 작성해야 합니다. fetchUserParallel의 실행 시간은 4초입니다

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 : ')
})()

Promise.all을 사용하여 동시 요청을 합니다.

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 ')
})()

오류 획득

try ...catch

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

packages promise를 사용하여 코드를 통일된 형식으로 반환하도록 하세요

참조 기사

  /**
   * 包装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)
  }

catch

  // 因为async 返回的promise对象，所以可以使用catch
  const user4 = await fetchUser(true).catch(err => {
    console.error('user4 error:', err)
  })

를 계속 사용하세요

관심이 있으시면 다음을 실행할 수 있습니다. code and
test the code

위 글이 여러분의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!