JS 루프에서 async 및 await 사용의 올바른 자세

개요(주기 모드 - 공통)

• ~을 위한
• 지도
• 각각
• 필터

순회할 배열 및 비동기 메서드 선언

배열 선언: ⬇️

const skills = ['js', 'vue', 'node', 'react']
复制代码

다른 비동기 코드 선언 promise: ⬇️

function getSkillPromise (value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(value)
    }, 1000)
  })
}
复制代码

for 루프에서 사용

for루프는 함수가 아니라 함수 안에서 사용해야 하므로 async루프 로 감싸 주어야 합니다.awaitforfunction

async function test () {
  for (let i = 0; i < skills.length; i++) {
    const skill = skills[i]
    const res = await getSkillPromise(skill)
    console.log(res)
  }
}

test() // 调用
复制代码

사용되면 awaitJavaScript는 Promise가 반환될 때까지 실행을 일시 중지해야 합니다. 위의 결과는 for루프에 비동기 코드가 있고 for루프의 비동기 코드가 완전히 완료된 후에 for루프 뒤의 코드를 실행할 수 있음을 의미합니다. 그러나 그는 다음과 같은 자세한 분석에서 , , 등과
같은 콜백 루프를 처리할 수 없습니다 .forEachmapfilter

지도에서 사용

에서 map사용되는 await반환  map 값은 항상 promise배열입니다. 이는 비동기 함수가 항상 을 반환하기 때문입니다 promise.

async function test () {
  console.log('start')
  const res = skills.map(async item => {
    return await getSkillPromise(item)
  })
  console.log(res)
  console.log('end')
}

test()
复制代码

결과: 항상 promise배열

start
[
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> }
]
end
复制代码

promise반환 결과를 기다리려면 이를 사용하여 promise.all()처리 할 수 있습니다.

async function test () {
  console.log('start')
  const res = skills.map(async item => {
    return await getSkillPromise(item)
  })
  const resPromise = await Promise.all(res)
  console.log(resPromise)
  console.log('end')
}

test()

// 结果
start
[ 'js', 'vue', 'node', 'react' ]
end

复制代码

forEach에서 사용

먼저 코드와 결과를 업로드하십시오.

async function test () {
  console.log('start')
  skills.forEach(async item => {
    const res = await getSkillPromise(item)
    console.log(res)
  })
  console.log('end')
}

test()
复制代码

예상되는 결과

'Start'
'js'
'vue'
'node'
'react'
'End'
复制代码

forEach루프가 비동기 결과가 반환되기를 기다리기 전에 실제 결과 가 실행됩니다.console.log('end')

'Start'
'End'
'js'
'vue'
'node'
'react'
复制代码

자바스크립트는  forEachPromise Aware를 지원하지 않고, 와도 지원하므로  async 더 이상  사용할  await수 없습니다   .forEachawait

필터에 사용

또는 에 대해 filter필터링된 옵션 사용itemvuereact

정상적인 사용 filter:

async function test () {
  console.log('start')
  const res = skills.filter(item => {
    return ['vue', 'react'].includes(item)
  })
  console.log(res)
  console.log('end')
}

test() // 调用

// 结果
start
[ 'vue', 'react' ]
end
复制代码

사용 await후 :

async function test () {
  console.log('start')
  const res = skills.filter(async item => {
    const skill = await getSkillPromise(item)
    return ['vue', 'react'].includes(item)
  })
  console.log(res)
  console.log('end')
}

test()
复制代码

예상되는 결과:

start
[ 'vue', 'react' ]
end
复制代码

실제 결과:

[ 'js', 'vue', 'node', 'react' ]
end
复制代码

결론: 비동기 함수 getSkillPromise가 반환하는 결과는 promise항상 true이기 때문에 모든 옵션이 필터링됩니다.