promise.all 是如何工作的? [英] How does promise.all work?

问题描述

我开始挖掘 Promise 并发现了有趣的 Promise.all.

I started diggin' in promises and found interesting Promise.all.

MDN 中说

Promise.all(iterable) 方法返回一个承诺，当 iterable 参数中的所有承诺都已解决时，该承诺就会解决.

The Promise.all(iterable) method returns a promise that resolves when all of the promises in the iterable argument have resolved.

这基本上意味着设置承诺在参数列表中的所有承诺都已解决之后解决.我试图实现它.我只是承诺 ajax 调用.

Which basically means that set promises resolve after and if all promises in argument list have been resolved. I tried to implement it. I made simply promise ajax call.

var get = function(url) {
    return new Promise(function(resolve,reject) {
        var xhtml=new XMLHttpRequest();

        xhtml.open("GET",url);
        xhtml.responseType = 'blob';
        xhtml.onload = function() {
            if(xhtml.status==200){
                resolve(xhtml.response);
            } else {
                reject(Error("Error"+statusText));
            }
        }
        xhtml.send();
    });

}

get("one.jpg").then(function(response){
    var blob = window.URL.createObjectURL(response);
    var img = document.createElement("img");

    console.log("Success"+response);

    img.src = blob;

    document.body.appendChild(img);
});

哪个工作正常.但是在我尝试添加 Promise.all 之后，它抛出了一个错误.

Which works fine. But after I tried to add Promise.all it threw an error.

Promise.all(get).then(function(response){alert("done")});

正如我所说，这引发了一个错误无法将 Promise.all 的参数 1 转换为序列."所以我假设我没有理解 promise.all 的含义.它是如何工作的?

this as i said threw an error " Argument 1 of Promise.all can't be converted to a sequence." So I assume i didn't get the meaning of promise.all. How does it work?

推荐答案

Promise.all 接受一个数组(或任何可迭代的)promise 并在所有 promise 都实现或拒绝其中一个时实现拒绝.我认为，如果我们实施它并了解我们为什么需要它，就会更容易理解.

Promise.all takes an array (or any iterable) of promises and fulfills when all of them fulfill or rejects when one of them rejects. I think it's easier to understand if we implement it and understand why we need it.

一个常见的用例可能是等待窗口加载和服务器返回数据以运行一些代码:

A common use case might be to wait for the window to load and for the server to return data in order to run some code:

// a function that returns a promise for when the document is ready.
function windowReady(){
    return new Promise(function(resolve){
         window.addEventListener('DOMContentLoaded', resolve);
    }); 
}

// function that returns a promise for some data
function getData(){
    return fetch("/").then(function(r){ return r.json() });
}

现在，我们希望它们同时执行，然后得到结果.这里有两个项目，但很容易有 5 件事情要等待，或者 100 件.所以我们使用 Promise.all:

Now, we want both of them to execute at the same time and then get the result. There are two items here but there could have easily been 5 things to wait for, or 100. So we use Promise.all:

Promise.all([windowReady(), getData()]).then(function(results){
     // results[1] is the data, it's all in an array.
});

让我们看看如何实现它:

Let's see how we can implement it:

function all(iterable){ // take an iterable 
  // `all` returns a promise.  
  return new Promise(function(resolve, reject){ 
    let counter = 0; // start with 0 things to wait for
    let results = [], i = 0;
    for(let p of iterable){
        let current = i;
        counter++; // increase the counter 
        Promise.resolve(p).then(function(res){ // treat p as a promise, when it is ready: 
          results[i] = res; // keep the current result
          if(counter === 0) resolve(results) // we're done
        }, reject); // we reject on ANY error
       i++; // progress counter for results array
    }
  });
}

或者，在更多的 ES6ness 中:

Or, in even more ES6ness:

let all = iterable => new Promise((resolve, reject) => { 
  let arr = [...iterable], c = arr.length, results = [];
  arr.map(Promise.resolve, Promise).
      map((p, i) => p.then(v => { 
        r[i] = v;
        if(--c === 0) resolve(r);
      } , reject));
});

这篇关于promise.all 是如何工作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！