ホームページ > 記事 > ウェブフロントエンド > promsie.allとpromiseの逐次実行の詳細説明

promsie.allとpromiseの逐次実行の詳細説明

小云云オリジナル: 2018-01-20 11:50:213488ブラウズ

この記事は、WeChat アプレット promsie.all とプロミスの逐次実行に関する関連情報を主に紹介します。この記事が、困っている皆さんの参考になれば幸いです。

WeChat ミニプログラム promsie.all と Promise は順番に実行されます

1. はじめに

最近、私はミニプログラムを開発していますが、私が遭遇した要件の 1 つは、フォームの送信です。ここで WeChat が行うことは、まず画像をアップロードすることです。次に、画像の名前とアドレスが返されます。次に、画像情報をフォームの対応する位置に挿入して、フォームを送信します。フォームをアップロードする前に画像リクエストを行ってください。WeChat ミニプログラムに複数の写真がある場合は、1 枚ずつしかアップロードできません。簡単に言うと、画像をアップロード（複数リクエスト）した後、戻り値を取得してからフォームをアップロードするにはどうすればよいでしょうか？

2. Promise.all と Promise.race

まず、Promise.all メソッドと Promise.race メソッドの違いを紹介します。または、最初に渡された 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 つは返された結果の配列です。もう 1 つは value で、value に渡されます。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());
}

promsie.allとpromiseの逐次実行の詳細説明

関連記事