Promise 대기 열 구축 비동기 함수 순서 실행

4967 단어 es6
장면
  • a, b, c 세 가지 비동기 임무 가 있 는데 반드시 a 를 먼저 집행 하고 b 를 집행 하 며 마지막 에 c
  • 를 집행 해 야 한다.
  • 그리고 다음 임 무 는 지난번 임무 수행 결 과 를 받 아야 조작 할 수 있 습 니 다
  • 사고의 방향
  • 우 리 는 하나의 대기 열 을 실현 해 야 합 니 다. 이 비동기 함 수 를 대기 열 에 추가 하고 그들의 집행 을 관리 해 야 합 니 다. 대기 열 은 First In First Out 의 특성 을 가지 고 있 습 니 다. 즉, 먼저 추 가 된 것 이 먼저 실 행 될 것 입 니 다. 그 다음 에 다음 을 실행 할 수 있 습 니 다 (스 택 과 구별 하 는 것 을 주의 하 십시오)
  • 여러분 도 jQuery 의 animate 방법 을 비교 해 보 세 요. 여러 개의 애니메이션 을 추가 해도 순서대로 실 행 됩 니 다
  • 해결 하 다.
  • 3 개의 비동기 함수 시 뮬 레이 션
    //     a
    var a = function () {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve('a')
        }, 1000)
      })
    }
    
    //     b
    var b = function (data) {
      return new Promise(function (resolve, reject) {
        resolve(data + 'b')
      })
    }
    
    //     c
    var c = function (data) {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(data + 'c')
        }, 500)
      })
    }
  • 해결 방법 1 (then 체인 조작 사용)
  • 특징: 수 요 를 만족 시 킬 수 있 지만 쓰기 가 비교적 번거롭다
  • 코드
    //    
    a()
      .then(function (data) {
        return b(data)
      })
      .then(function (data) {
        return c(data)
      })
      .then(function (data) {
        console.log(data)// abc
      })
  • 방법 2 (대기 열 구축)
  • 특징: 포장 방법, 다른 곳 에 이식 하여 사용 가능
  • 코드
    //     
    function queue(arr) {
      var sequence = Promise.resolve()
      arr.forEach(function (item) {
        sequence = sequence.then(item)
      })
      return sequence
    }
    
    //     
    queue([a, b, c])
      .then(data => {
        console.log(data)// abc
      })
  • 방법 3 (async, await 로 대기 열 구축)
  • 같은 방법 2. 더 커 보일 뿐
  • 코드
    async function queue(arr) {
      let res = null
      for (let promise of arr) {
        res = await promise(res)
      }
      return await res
    }
    queue([a, b, c])
      .then(data => {
        console.log(data)// abc
      })
  • 참고 로 bluebird 의 Promise. reduce 도 함 수 를 순서대로 실행 할 수 있 지만 사용 할 수 있 는 장면 은 매우 제한 되 어 있 습 니 다. 보통 파일 정 보 를 읽 는 데 사 용 됩 니 다. 이상 에서 제시 한 방법 은 비동기 함수 에서 무엇 을 하 든 함수 가 마지막 으로 Promise 대상 을 되 돌려 주면 사용 할 수 있 습 니 다
  • .

    좋은 웹페이지 즐겨찾기