WeChat 애플릿 promsie.all 및 promise의 순차적 실행-미니 프로그램 개발-php.cn

WeChat 애플릿 promsie.all 및 promise의 순차적 실행

不言

풀어 주다： 2018-06-27 14:06:49

원래의

1907명이 탐색했습니다.

이 글은 promsie.all의 순차적 실행과 WeChat 애플릿의 promise에 대한 관련 정보를 주로 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

promsie.all과 promise의 순차적 실행 of the WeChat applet

1. 소개

최근에 제가 접한 작은 프로그램 중 하나는 제출된 양식에 사진이 포함되어 있다는 것입니다. 먼저 배경에 사진의 이름과 주소를 넣고 돌려주신 후, 양식 제출 전 해당 양식의 위치에 이미지 정보를 삽입하여 업로드하시기 바랍니다. 또한 WeChat 애플릿에 이미지가 여러 개 있는 경우 Zhang은 하나만 업로드할 수 있습니다. 쉽게 말하면 이미지 업로드(복수요청) 후, 반환값을 받고, 폼을 업로드하면 어떻게 해야 할까요?

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. 다음은 시퀀스태스크 함수의 역할에 대한 설명입니다

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

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

로그인 후 복사

pushValue도 함수 객체입니다. RecordValue를 [ ] 배열에 바인딩합니다. 첫 번째 매개변수는 null로 전달되며 이는 함수 this의 포인터를 변경하지 않으므로 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());
}

로그인 후 복사

위 내용은 모든 사람의 학습에 도움이 되기를 바랍니다. 내용이 있으니 PHP 중국어 홈페이지를 주목해주세요!