Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der sequentiellen Ausführung von promsie.all und Promise

Detaillierte Erläuterung der sequentiellen Ausführung von promsie.all und Promise

小云云
Freigeben: 2018-01-20 11:50:21
Original
3522 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die relevanten Informationen zum WeChat-Applet promsie.all und zur sequentiellen Ausführung von Versprechen vor. Ich hoffe, dass dieser Artikel allen helfen kann.

WeChat-Applet promsie.all und Promise werden nacheinander ausgeführt

Vorwort

Kürzlich Bei der Entwicklung kleiner Programme ist eine der Anforderungen, auf die ich gestoßen bin, das Einreichen von Bildern. WeChat lädt hier zuerst das Bild hoch, und der Hintergrund gibt Ihnen den Bildnamen und die Adresse zurück, und dann fügen Sie das ein Bildinformationen. Gehen Sie zur entsprechenden Position des Formulars und senden Sie das Formular ab. Hier erfahren Sie, wie Sie die Bildanforderung vor dem Hochladen des Formulars hochladen. Wenn das WeChat-Applet mehrere Bilder enthält, können Sie diese nur einzeln hochladen . Um es einfach auszudrücken: Was soll ich tun, nachdem ich das Bild hochgeladen habe (mehrere Anfragen), den Rückgabewert erhalten und dann das Formular hochgeladen habe?

2. Promise.all und Promise.race

Lassen Sie uns zunächst die Unterschiede zwischen den Methoden Promise.all und Promise.race vorstellen. Promise.all (iterierbar) Die Methode gibt ein Versprechen zurück, wenn alle Versprechen in den iterierbaren Parametern abgeschlossen wurden oder wenn das erste übergebene Versprechen (das sich auf die Ablehnung bezieht) fehlschlägt. iterable ist ein iterierbares Objekt, im Allgemeinen jedoch ein Array. Der Rückgabewert ist ebenfalls ein Promise-Objekt.

Einige Punkte müssen klargestellt werden. Promise.all führt mehrere Promise-Objekte gleichzeitig aus, und die Parameter des zurückgegebenen Promise-Objekts sind ein Array, und jedes Element im Array ist auch ein iterierbares Objekt . Die Bestellung wird zurückgegeben.

Die Promise.race(iterable)-Methode gibt ein neues Versprechen zurück. Solange der Parameter iterable ein Versprechensobjekt „resolve“ oder „reject“ enthält, wird das neue Versprechen sofort abgeschlossen (resolve)“ oder „ablehnen“ und erhalten Sie den Rückgabewert oder die Fehlerursache des vorherigen Versprechenobjekts. Solange also eines der Iterables abgeschlossen wird oder fehlschlägt, wird sofort ein Promise-Objekt zurückgegeben. Aus dem Wort „Rasse“ lässt sich auch schließen, dass der Erstankömmling sofort ein Versprechensobjekt zurückgibt.

Gemäß der obigen Definition verwenden wir die Promise.all-Methode, um unsere Bedürfnisse zu erfüllen.


//存储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数组进行处理
})
Nach dem Login kopieren

3. Probleme mit dem WeChat-Miniprogramm

Ich arbeite an der Bild-Upload-Funktion von WeChat Hier können Sie nur das Bild zuerst hochladen und dann den Bildnamen und die Adresse zurückgeben.

Hier verwenden wir die Promise.all-Methode, aber es gibt ein Problem, dass Promise.all gleichzeitig ausgeführt wird, aber das WeChat-Applet kann nur 10 gleichzeitige Anfragen stellen.

Für das Hochladen von Bildern müssen Sie möglicherweise mehr als 10 Bilder gleichzeitig hochladen, was mehr als 10 gleichzeitige Anfragen bedeutet. In diesem Fall meldet WeChat einen Fehler

„WAService.js:4 uploadFile :fail createUploadTask:fail überschreitet die maximale Anzahl an Upload-Verbindungen von 10“.

4. Sequentielle Promise-Ausführungsverarbeitung

Weil Promise.all mehrere Promsie-Objekte gleichzeitig ausführt Zeit, daher gibt es eine Begrenzung für die Anzahl solcher Parallelitäten, die jeweils nur 10 sein können. Wenn Sie diese Grenze durchbrechen möchten, können Sie jedes Versprechen nacheinander ausführen.

Der Code lautet wie folgt:


//顺序处理函数
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数组进行处理
});
Nach dem Login kopieren

1. Hier ist eine Erklärung der Funktion der sequenceTasks-Funktion

Erster recordValue Die Funktion übergibt zwei Werte, einer ist ein Ergebnisarray, der andere ist ein Wert, value ist der übergebene Wert, results.push(value); schiebt jeden Wert in das Ergebnisarray und gibt dann den zurück Ergebnisarray.


let pushValue = recordValue.bind(null, []);
Nach dem Login kopieren

pushValue ist ebenfalls ein Funktionsobjekt. Der erste Parameter wird durch null dargestellt, was den Zeiger der Funktion nicht ändert Dies bedeutet, dass pushValue eine Funktion (Wert) ist und die Parameter als Wert übergeben werden.


promise = promise.then(task).then(pushValue);
Nach dem Login kopieren

task ist eine Funktion, und die Funktion gibt ein Promise-Objekt zurück. In unserem Fall ist es die Funktion zum Hochladen von Bildern , then(pushValue), pushValue ist eine Funktion der Funktion (value). Value stellt den Rückgabewert dar, nachdem das Bild hochgeladen wurde, den Rückgabewert in das Ergebnisarray schiebt, ihn nacheinander ausführt und ihn nacheinander zum Ergebnisarray hinzufügt und kehrt schließlich zurück. Sie können ein Array von Objekten abrufen, und das Array enthält die Ergebnisse, die bei der sequentiellen Ausführung zurückgegeben werden.

2. Die for-Schleife in sequenceTasks kann auch in der folgenden Reduzierungsmethode geschrieben werden:


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());
}
Nach dem Login kopieren

Verwandte Empfehlungen:

headjs implementiert das parallele Laden von Websites, aber die sequentielle Ausführung von JS

Detaillierte Einführung in die Ausführungsergebnisse der Ladereihenfolge von Klassen in Java

Wie ist die Ausführungsreihenfolge des JS-Codes?

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der sequentiellen Ausführung von promsie.all und Promise. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage