위 챗 애플 릿 promsie.all 과 promise 순서 로 실 행 됩 니 다.

위 챗 애플 릿 promsie.all 과 promise 순서 로 실 행 됩 니 다.
머리말
최근 애플 릿 개발 에 부 딪 힌 요 구 는 바로 폼 을 제출 하 는 것 입 니 다.제출 한 폼 에 그림 이 포함 되 어 있 습 니 다.위 챗 쪽 의 방법 은 먼저 그림 을 올 리 고 배경 에서 그림 이름과 주 소 를 되 돌려 주 는 것 입 니 다.그리고 사진 정 보 를 폼 의 해당 위치 에 삽입 한 다음 에 폼 을 제출 하 는 것 입 니 다.그림 을 올 려 달 라 는 요청 을 한 다음 에 폼 을 올 리 는 방법 과 관련 됩 니 다.그리고 위 챗 애플 릿 에 사진 이 여러 개 라면 한 장 만 올 릴 수 있다.쉽게 말 하면 사진(여러 요청)을 올 리 고 반환 값 을 받 고 폼 을 올 리 는 것 입 니 다.어떻게 해 야 합 니까?
2.Promise.all 과 Promise.race
먼저 Promise.all 과 Promise.race 방법의 차이 점 을 소개 합 니 다.Promise.all(iterable)방법 은 교체 가능 한 매개 변수 에 있 는 promises 가 완성 되 었 거나 첫 번 째 로 전 달 된 promise(reject)가 실 패 했 을 때 promise 로 돌아 가 는 것 을 말 합 니 다.iterable 은 교체 가능 한 대상 이지 만 보통 배열 입 니 다.반환 값 도 Promise 대상 입 니 다.
명확 한 몇 가지 가 필요 합 니 다.Promise.all 은 동시 실행 과 동시에 여러 개의 Promise 대상 을 실행 하고 돌아 오 는 Promise 대상 의 인 자 는 하나의 배열 입 니 다.배열 의 각 항목 도 교체 대상 이 실행 할 수 있 는 순서 로 되 돌아 갑 니 다.
Promise.race(iterable)방법 은 새로운 promise 를 되 돌려 줍 니 다.매개 변수 iterable 에 promise 대상 이'완성(resolve)'또는'실패(reject)'만 있 으 면 새로운 promise 는 바로'완성(resolve)'또는'실패(reject)'를 하고 그 전 promise 대상 의 반환 값 이나 오류 원인 을 얻 습 니 다.그래서 iterable 중 하나 가 완성 되 거나 실패 하면 바로 promise 대상 으로 돌아 갑 니 다.레이스 라 는 단어 에 따 르 면 달리기 에서 도 알 수 있 듯 이 가장 먼저 도착 한 사람 은 바로 promise 대상 으로 돌아간다.
위의 정의 에 따라 우리 가 사용 하 는 Promise.all 방법 으로 우리 의 수 요 를 완성 합 니 다.

//  promise     
let promiseArr = [];
//      
let imageList = [];
//         promise     promiseArr
for (let i = 0; i < imageList.length; i++) {
  let promise = new Promise((resolve, reject) => {
    //      
    wx.uploadFile({
      url: 'https://xxx.xxx.xxx/api/uploadImage',
      filePath: imageList[i],
      name: 'file',
      success: function(res) {
        //   res    ，  resolve  
        resolve(res);
      },
      fail: function (error) {
        reject(error);
      },
      complete: function (res) {
      },
    })
  });
  promiseArr.push(promise)
}
//Promise.all  promiseArr       promise  
Promise.all(promiseArr).then((result) => {
  //    result      
})

질문
위 챗 애플 릿 의 이미지 업로드 기능 에 서 는 그림 을 먼저 올 린 다음 그림 이름과 주 소 를 response 로 되 돌려 줄 수 밖 에 없습니다.
이 안에서 우 리 는 promise.all 방법 을 사 용 했 지만 한 가지 문 제 는 promise.all 이 동시에 실 행 된 것 이지 만 위 챗 애플 릿 은 한 번 에 10 개의 요청 만 동시 다발 할 수 있다 는 것 이다.
사진 업로드 에 있어 서 한 번 에 10 장 이 넘 는 사진 을 올 려 야 할 수도 있 습 니 다.즉,한 번 에 10 개가 넘 는 요청 을 동시에 보 내 면 위 챗 이 잘못 보 고 됩 니 다.
“WAService.js:4 uploadFile:fail createUploadTask:fail exceed max upload connection count 10”。

4.순서 Promise 실행 처리
Promise.all 은 여러 개의 promsie 대상 을 동시에 실행 하기 때문에 이러한 병발 수량 에 대해 서 는 애플 릿 이 제한 되 어 있 고 한 번 에 10 개 만 병발 할 수 있 기 때문에 이러한 제한 을 돌파 하려 면 각 Promise 를 순서대로 수행 할 수 있다.
코드 는 다음 과 같 습 니 다:

//      
function sequenceTasks(tasks) {
  //     
  function recordValue(results, value) {
    results.push(value);
    return results;
  }
  let pushValue = recordValue.bind(null, []);
  let promise = Promise.resolve();
  //   tasks          
  for (let i = 0; i < tasks.length; i++) {
    let task = tasks[i];
    promise = promise.then(task).then(pushValue);
  }
  return promise;
}

//    ，           promise  
let promiseFuncArr = [];
//      
let imageList = [];
//              promiseFuncArr   
for (let i = 0; i < imageList.length; i++) {
  let promiseTemp = function(){
    return new Promise((resolve, reject) => {
      //      
      wx.uploadFile({
        url: 'https://xxx.xxx.xxx/api/uploadImage',
        filePath: imageList[i],
        name: 'file',
        success: function(res) {
          //   res    ，  resolve  
          resolve(res);
        },
        fail: function (error) {
          reject(error);
        },
        complete: function (res) {
        },
      })
    });
  };
  promiseFuncArr.push(promiseTemp)
}

sequenceTasks(promiseFuncArr).then((result) => {
  //    result      
});

1.sequence Tasks 함수 의 역할 을 설명 합 니 다.
먼저 recordValue 함수 가 두 개의 값 을 입력 합 니 다.하 나 는 results 가 되 돌아 오 는 배열 이 고 다른 하 나 는 value 입 니 다.value 는 들 어 오 는 값 입 니 다.results.push(value).모든 값 push 를 results 배열 에 넣 고 results 배열 로 되 돌려 줍 니 다.

let pushValue = recordValue.bind(null, []);

pushValue 도 함수 대상 입 니 다.recordValue bind 를 하나의[]배열 에 전달 합 니 다.첫 번 째 매개 변 수 는 null 대표 로 함수 this 의 방향 을 바 꾸 지 않 기 때문에 pushValue 는 function(value)의 함수 이 고 매개 변 수 는 value 에 전 달 됩 니 다.

promise = promise.then(task).then(pushValue);

task 는 함수 입 니 다.함수 가 promise 대상 을 되 돌려 줍 니 다.여기 서 이미지 함 수 를 업로드 하 는 것 입 니 다.모든 그림 업로드 에 함 수 를 만 듭 니 다.then(pushValue),pushValue 는 function(value)의 함수 입 니 다.value 는 그림 업로드 후의 반환 값 을 대표 합 니 다.pushValue 는 result 배열 에 되 돌아 가 순서대로 실 행 됩 니 다.result 배열 에 순서대로 가입 합 니 다.마지막 으로 돌아오다.대상 배열 을 얻 을 수 있 습 니 다.배열 에 서 는 순서대로 되 돌아 오 는 결 과 를 얻 을 수 있 습 니 다.
2.sequence Tasks 에 있 는 for 순환 도 다음 과 같은 reduce 방식 으로 쓸 수 있 습 니 다.

function sequenceTasks(tasks) {
  //     
  function recordValue(results, value) {
    results.push(value);
    return results;
  }
  let pushValue = recordValue.bind(null, []);
  return tasks.reduce(function (promise, task) {
    return promise.then(task).then(pushValue);
  }, Promise.resolve());
}

궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!