for 루프에서 비동기 요청의 순서가 일관되지 않는 문제를 해결합니다.

for 루프에서 비동기 요청 순서가 일관되지 않는 문제 해결

직장에서 문제가 발생했습니다

For 루프를 사용하고 루프된 ID로 두 번째 요청을 합니다

이로 인해 문제가 발생합니다

요청 결과 반환 순서가 일관되지 않습니다

이유: 비동기 요청은 콜백 이벤트를 마이크로태스크 이벤트 대기열에 넣고 매크로태스크가 실행된 후에 마이크로태스크가 실행됩니다. 자세한 내용은 이벤트 대기열 메커니즘을 참조하세요

[관련] 추천 과정: JavaScript 비디오 튜토리얼]

해결책:

map 메서드를 통해 루프 요청을 만듭니다.

비동기 요청 메서드를 캡슐화하고 promise

를 반환합니다. 이렇게 하면 여러 개의 배열이 반환됩니다. promise

through promise.all() 메소드는 promise를 새로운 promise 인스턴스

// 通过Promise把所有的异步请求放进事件队列中
getInfo(item ,index) {
    const ms = 1000 * Math.ceil(Math.random() * 3)
    return new Promise((resolve,reject) => {
        setTimeout(() => {
           axios.get(id).then((result) => {
               resolve(result)
           })
        }, ms)
    })
}

// 返回多个promise
let promise = arr.map((item,index) = > {
    arr.forEach((item, index) => {
        return getInfo(item, index)
    })
})
// 对返回的promise数组进行操作
Peomise.all(promise).then((allData) => {
    arr.forEach((item, index) => {
        // ......
    })
})

로 패키지화합니다. 이 글은 js tutorial 칼럼에서 가져온 것입니다. 배우신 것을 환영합니다!

위 내용은 for 루프에서 비동기 요청의 순서가 일관되지 않는 문제를 해결합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!