ホームページ >ウェブフロントエンド >jsチュートリアル >promsie.allとpromiseの逐次実行の詳細説明
この記事は、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: '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数组进行处理 })
3. WeChat ミニ プログラムの問題点
WeChat ミニ プログラムの画像アップロード機能に取り組んでいるとき、最初に画像をアップロードしてから画像の名前とアドレスを返すことしかできません。応答。
ここでは、promise.all メソッドを使用していますが、問題があります。Promise.all は同時に実行されますが、WeChat アプレットは一度に 10 件の同時リクエストしか実行できません。
画像のアップロードの場合、一度に 10 個を超える画像をアップロードする必要がある場合があります。つまり、一度に 10 個を超える同時リクエストが行われることになり、WeChat はエラー
「WAService.js:4 UploadFile:」を報告します。 createUploadTask に失敗しました:最大アップロード接続数 10 を超えました。」
4. 順次 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 ここでは、sequenceTasks 関数の役割について説明します
let pushValue = recordValue.bind(null, []);
promise = promise.then(task).then(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の逐次実行の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。