Overview (Circular mode – Common)

• for
• map
• forEach
• filter

Declare traversal arrays and asynchronous methods

Declare an array: ⬇️

const skills = ['js'.'vue'.'node'.'react']
Copy the code

Declare another asynchronous code for promise: ⬇️

function getSkillPromise (value) {
  return new Promise((resolve, reject) = > {
    setTimeout(() = > {
      resolve(value)
    }, 1000)})}Copy the code

Used in the for loop

Since the for loop is not a function and async and await need to be used in functions, the for loop needs to have a layer of function

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

test() / / call
Copy the code

When you use await, you want JavaScript to pause execution until you wait for a promise to return processing results. The result above means that there is asynchronous code in the for loop and that the code after the for loop can wait until the asynchronous code in the for loop has completely run out. However, it cannot handle callback loops such as forEach, Map, filter, etc.

The map is used in

With await in a map, the map returns an array of promises because asynchronous functions always return promises.

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

test()
Copy the code

Result: Always a Promise array

start
[
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> }
]
end
Copy the code

If you want to wait for the promise to return, use 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()

/ / the result
start
[ 'js'.'vue'.'node'.'react' ]
end

Copy the code

Used in the forEach

Code and results first

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

test()
Copy the code

The expected results

'Start'
'js'
'vue'
'node'
'react'
'End'
Copy the code

The actual result is console.log(‘end’) executed before the forEach loop waits for the asynchronous result to return

'Start'
'End'
'js'
'vue'
'node'
'react'
Copy the code

ForEach in JavaScript does not support promise awareness and also supports async and await, so you cannot use await in forEach.

The filter used in the

Use filter to filter items as vue or React options

Normal use filter:

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

test() / / call

/ / the result
start
[ 'vue'.'react' ]
end
Copy the code

After using 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()
Copy the code

Expected Results:

start
[ 'vue'.'react' ]
end
Copy the code

Actual results:

[ 'js', 'vue', 'node', 'react' ]
end
Copy the code

Conclusion: Because the asynchronous function getSkillPromise returns a promise that is always true, all options pass the filter

Conclusion: Because of the work encounteredLarge forms pull out components, the asynchronous verification is encountered this problem, and then after consulting the data summed up the results, if there is an error, welcome to leave a message in the comment area