개요(주기 모드 - 공통)
- ~을 위한
- 지도
- 각각
- 필터
순회할 배열 및 비동기 메서드 선언
배열 선언: ⬇️
const skills = ['js', 'vue', 'node', 'react']
复制代码
다른 비동기 코드 선언
promise
: ⬇️
function getSkillPromise (value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(value)
}, 1000)
})
}
复制代码
for 루프에서 사용
for
루프는 함수가 아니라 함수 안에서 사용해야 하므로async
루프 로 감싸 주어야 합니다.await
for
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() // 调用
复制代码
사용되면
await
JavaScript는 Promise가 반환될 때까지 실행을 일시 중지해야 합니다. 위의 결과는for
루프에 비동기 코드가 있고for
루프의 비동기 코드가 완전히 완료된 후에for
루프 뒤의 코드를 실행할 수 있음을 의미합니다. 그러나 그는 다음과 같은 자세한 분석에서 , , 등과
같은 콜백 루프를 처리할 수 없습니다 .forEach
map
filter
지도에서 사용
에서
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'
复制代码
자바스크립트는
forEach
Promise Aware를 지원하지 않고, 와도 지원하므로async
더 이상 사용할await
수 없습니다 .forEach
await
필터에 사용
또는 에 대해
filter
필터링된 옵션 사용item
vue
react
정상적인 사용
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이기 때문에 모든 옵션이 필터링됩니다.