집 > 기사 > 웹 프론트엔드 > promsie.all과 promise의 순차적 실행에 대한 자세한 설명

promsie.all과 promise의 순차적 실행에 대한 자세한 설명

小云云원래의: 2018-01-20 11:50:213497검색

이 글은 주로 WeChat 애플릿 promsie.all에 대한 관련 정보와 약속의 순차적 실행을 소개합니다. 이 글이 도움이 필요한 모든 사람에게 도움이 되기를 바랍니다.

WeChat 미니 프로그램 promsie.all과 promise가 순차적으로 실행됩니다

1. 소개

최근 미니 프로그램을 개발 중인데, 제출한 양식 중 하나가 폼 제출이었습니다. 여기에서 WeChat이 수행하는 작업은 먼저 이미지를 업로드하고 배경에서 이미지 이름과 주소를 반환한 다음 양식의 해당 위치에 이미지 정보를 삽입한 다음 양식을 제출하는 것입니다. 양식을 업로드하기 전에 이미지를 요청하세요. WeChat 애플릿에 여러 장의 사진이 있는 경우 하나씩만 업로드할 수 있습니다. 쉽게 말하면 이미지 업로드(복수요청) 후, 반환값을 받고, 폼을 업로드하면 어떻게 해야 할까요?

2. Promise.all 및 Promise.race

먼저 Promise.all과 Promise.race 메서드의 차이점을 소개하겠습니다. 또는 처음으로 전달된 Promise(거부 참조)가 실패하면 Promise가 반환됩니다. iterable은 반복 가능한 객체이지만 일반적으로 배열입니다. 반환 값도 Promise 객체입니다.

몇 가지 사항을 명확히 해야 합니다. Promise.all은 여러 Promise 객체를 동시에 실행하며, 반환된 Promise 객체의 매개변수는 배열의 항목도 반복 가능한 객체가 실행되는 순서대로 반환됩니다. .

Promise.race(iterable) 메소드는 iterable 매개변수에 "해결" 또는 "거부"라는 약속 개체가 있는 한 새 약속은 즉시 "해결" 또는 "거부"되고 다음을 가져옵니다. 이전 Promise 객체의 반환 값 또는 오류 이유. 따라서 iterable 중 하나가 완료되거나 실패하는 한 Promise 객체가 즉시 반환됩니다. race라는 단어에 따르면, 첫 번째 도착은 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: &#39;https://xxx.xxx.xxx/api/uploadImage&#39;,
      filePath: imageList[i],
      name: &#39;file&#39;,
      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数组进行处理
})

3. WeChat 애플릿 문제

WeChat 애플릿의 이미지 업로드 기능 작업 시 먼저 이미지를 업로드한 다음 이미지 이름과 주소를 응답으로 반환할 수 있습니다.

여기서는 promise.all 메소드를 사용하는데 문제가 있습니다. Promise.all은 동시에 실행되지만 WeChat 애플릿은 한 번에 10개의 동시 요청만 할 수 있습니다.

이미지 업로드의 경우 한 번에 10개 이상의 이미지를 업로드해야 할 수 있습니다. 이는 한 번에 10개 이상의 동시 요청을 의미합니다. 이 경우 WeChat은 오류

"WAService.js:4 uploadFile:를 보고합니다. createUploadTask 실패: 실패가 최대 업로드 연결 수 10을 초과했습니다."

4. 순차적 Promise 실행 처리

Promise.all은 동시에 여러 promsie 개체를 실행하기 때문에 이러한 동시 실행 수에는 제한이 있습니다. time.이므로 이 제한을 극복하려면 각 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: &#39;https://xxx.xxx.xxx/api/uploadImage&#39;,
        filePath: imageList[i],
        name: &#39;file&#39;,
        success: function(res) {
          //可以对res进行处理，然后resolve返回
          resolve(res);
        },
        fail: function (error) {
          reject(error);
        },
        complete: function (res) {
        },
      })
    });
  };
  promiseFuncArr.push(promiseTemp)
}

sequenceTasks(promiseFuncArr).then((result) => {
  //对返回的result数组进行处理
});

1. 다음은 sequenceTasks 함수의 역할에 대한 설명입니다

먼저, RecordValue 함수는 두 개의 값을 전달합니다. 하나는 반환된 결과 배열이고, 다른 하나는 값으로 전달됩니다. results.push(value); 각 값을 결과 배열에 푸시한 다음 결과 배열을 반환합니다.

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

pushValue도 함수 개체입니다. RecordValue를 [ ] 배열에 바인딩합니다. 첫 번째 매개변수는 null로 전달되며 함수의 포인터를 변경하지 않습니다. 따라서 pushValue는 다음을 포함하는 함수(값) 함수입니다. 매개변수를 값으로 전달합니다.

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

task는 함수이며, 이 함수는 promise 객체를 반환합니다. 우리의 경우 이미지 업로드 함수가 생성되고, pushValue는 함수(value)입니다. ), value 는 이미지가 업로드된 후의 반환 값을 pushValue 는 결과 배열에 푸시하고, 순차적으로 실행한 후, 결과 배열에 추가하여 최종적으로 반환합니다. 객체 배열을 얻을 수 있으며 배열에는 순차적 실행으로 반환된 결과가 포함됩니다.

2. 순서 작업의 for 루프는 다음과 같은 축소 방법으로 작성할 수도 있습니다.

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());
}

promsie.all과 promise의 순차적 실행에 대한 자세한 설명

관련 기사