Postura correcta de usar async y esperar en bucle JS

Descripción general (modo de ciclo - común)

• para
• mapa
• para cada
• filtrar

Declarar matrices y métodos asincrónicos para atravesar

Declarar una matriz: ⬇️

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

Declara otro promisecódigo asíncrono: ⬇️

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

utilizado en un bucle for

Dado que forel ciclo no es una función, pero asyncdebe awaitusarse en una función, debe envolverse foren un ciclofunction

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

test() // 调用
复制代码

Cuando se usa await, se espera que JavaScript suspenda la ejecución hasta que espere a que regrese la promesa. El resultado anterior significa que forhay código asíncrono en el ciclo, y el código detrás del ciclo forse puede ejecutar después de que el código asíncrono en el ciclo haya terminado por completo . Pero no puede manejar bucles de devolución de llamada, como , , , etc., el siguiente análisis detallado.for
forEachmapfilter

usado en el mapa

mapUsado en , awaitel  map valor devuelto siempre es promiseuna matriz, esto se debe a que las funciones asíncronas siempre devuelven promise.

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

test()
复制代码

Resultado: siempre promiseuna matriz

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

Si desea esperar promiseel resultado de la devolución, puede usarlo promise.all()para procesarlo

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

复制代码

utilizado en forEach

Primero sube el código y los resultados

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

test()
复制代码

gastos esperados

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

El resultado real forEachse ejecuta antes de que el ciclo espere a que regrese el resultado asincrónico.console.log('end')

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

JavaScript  forEachno es compatible con el reconocimiento de promesas, y también es compatible con  async y await, por lo que ya no se puede  forEach usar  await .

utilizado en el filtro

Usar opciones filterfiltradas itempor vueoreact

Uso habitual 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
复制代码

awaitDespués de usar :

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()
复制代码

gastos esperados:

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

resultados actuales:

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

Conclusión: debido a que getSkillPromiseel resultado devuelto por la función asíncrona promisesiempre es verdadero, todas las opciones se filtran