WeChat アプレット promsie.all と Promise の順次実行

この記事は主に、WeChat アプレットの promsie.all と Promise の逐次実行に関する情報を紹介します。この記事が必要な友人の参考になれば幸いです

promsie.all と Promise の逐次実行。 WeChat アプレットの説明

1. はじめに

最近、私はフォームの送信という要件に遭遇しました。ここでの WeChat での送信方法は、写真をアップロードすることです。まず、背景に写真の名前とアドレスを入力してから、フォームの対応する位置に画像情報を挿入してから、フォームを送信します。これには、アップロードする前に画像リクエストをアップロードする方法が含まれます。 WeChat アプレットに複数の画像がある場合、Zhang は 1 つだけアップロードできます。簡単に言うと、画像をアップロード（複数リクエスト）した後、戻り値を取得してからフォームをアップロードするにはどうすればよいでしょうか？

2. Promise.all と Promise.race

まず、Promise.all メソッドと Promise.race メソッドの違いを紹介します。Promise.all(iterable) メソッドは、反復可能なパラメーター内のすべての Promise がまたは、最初に渡された Promise (拒否を参照) が失敗した場合、Promise が返されます。 iterable は反復可能なオブジェクトですが、通常は配列です。戻り値も Promise オブジェクトです。

いくつかの点を明確にする必要があります。 Promise.all は複数の Promise オブジェクトを同時に実行し、返される Promise オブジェクトのパラメーターも、反復可能なオブジェクトが実行される順序で返されます。 。

Promise.race(iterable) メソッドは新しい Promise を返します。パラメータ iterable に Promise オブジェクト「resolve」または「reject」がある限り、新しい Promise はすぐに「resolve」または「Reject」され、前の Promise オブジェクトの戻り値またはエラー理由。したがって、反復可能オブジェクトの 1 つが完了するか失敗する限り、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: &#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 オブジェクトを同時に実行するため、同時に実行できる Mini プログラムの数には制限があります。したがって、この制限を突破したい場合は、各 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関数は2つの値を渡します。1つは返された結果の配列です。もう 1 つは値です。results.push(value); はそれぞれの値を結果配列にプッシュし、結果配列を返します。

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

pushValue も関数オブジェクトです。 RecordValue を [ ] 配列にバインドします。最初のパラメーターは null として渡されるため、pushValue は関数 (値) です。パラメータは値で渡されます。

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

タスクは関数であり、この関数はpromiseオブジェクトを返します。この場合、それは画像のアップロード関数です。then(pushValue)、pushValueは関数()です。 value)、value は画像がアップロードされた後の戻り値を表します。pushValue は戻り値を結果配列にプッシュし、順番に実行し、結果配列に順番に追加して、最後に戻ります。オブジェクトの配列を取得でき、その配列には順次実行によって返された結果が含まれます。

2. sequenceTasks の 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());
}

以上が、皆様の学習に役立つことを願っています。内容については、PHP 中国語 Web サイトにご注意ください。

関連する推奨事項:

WeChatアプレットにアクセスするためのnode.jsインターフェースサーバーの構築の概要

WeChatアプレットのwx.requestネットワークリクエストの概要

WeChatアプレットはYDUIにScrollTabコンポーネントを実装します

以上がWeChat アプレット promsie.all と Promise の順次実行の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。