promise-all

Promise对象用于表示一个异步操作的最终状态（完成或者失败），以及该异步操作的结果值；

Javascript Demo

var promise1 = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve('foo');
    }, 300)
})

promise1.then(function(value) {
    console.log(value);
}) 
// expected output: "foo"

console.log(promise1);
// expected output: [object Promise]

The result of below demo:

1 2	> [object Promise] > "foo"

Grammar

1	new Promise(function(resolve, reject) {})

Description

Promise对象是一个代理对象，被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功与失败分别绑定的处理方法。这让异步方法可以像同步方法那样返回值。但并不是立即返回执行的结果，而是一个能代表未来出现的结果的promise对象

一个Promise有一下几种状态：

pending: 初始状态，既不是成功状态，也不是失败的状态；
fulfilled: 意味着操作成功完成；
rejected：意味着操作失败；

pending状态的Promise对象可能会变成fulfilled状态并传递一个值给对应的状态处理方法；也可能变为失败状态（rejected）并传递失败的信息。当其中任意一种情况出现时，Promise对象的then方法绑定的处理方法就会被调用。当Promise状态为fulfilled时，调用then的onfuifilled方法，当Promise状态为rejected时，调用then的onrejected方法，所以在异步操作的完成和绑定处理方法之间不存在竞争。

function

Promise.all(iterable)

该方法返回一个Promise实例，此实例在iterable参数内多有的promise都完成（resolved）或参数中promise中不包括promise时回调完成（resolve）；如果参数中promise有一个失败（rejected），此实例回调失败（reject），失败原因是第一个失败promise的结果

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'foo')
})

Promise.all([promise1, promise2, promise3].then(function(values) {
    consle.log(values);
}))
// expected output: Array [3, 42, 'foo']

The relust of below JS demo:

1	> Array [3, 42, "foo"]

For example:

getAllData() {
    let self = this;
    self.getAllPromiseAjax([self.queryActivityAnalysis(), self.queryActivityAmount()]);
}

getAllPromiseAjax(promises) {
    let self = this;
    self.initEchart();

    Promise.all(promises)
    .then(arrs => {
        console.log(arrs);
    }).catch(err => {
        console.log(err);
    }).finally(() => {
        self.$loading.hide();
    })

queryActivityAmount() {
        let self = this;

        return new Promise((resovle, reject) => {
            $.ajax({
                url: '',
                type: 'POST',
                data: {},
                success: function(res) {
                    resolve(res);
                },
                error: function(res) {
                    reject(res);
                }
            })
        })
    }

Promise.prototype.catch()

catch()方法返回一个Promise，并且处理拒绝的情况。它的行为与调用Promise.prototype.then(undefined, onRejected)相同。

Promise.prototype.finally()

finally()方法返回一个Promise，在Promise执行结束时，无论结果是fulfilled或者时rejected，在执行then（）和catch（）后，都会执行finally指定的回调函数。这为指定执行完promise后，无论结果是fulfilled还是rejected都需要执行的代码提供一种方式，避免同样的语句需要在then（）和catch（）中各写一次的情况；

// 抛出一个错误，大多数时候将调用catch方法
var p1 = new Promise(function(resolve, reject) {
    throw 'Uh-oh';
})

p1.catch(function(e) {
    console.log(e); // "Uh-oh"
})

// 在异步函数中抛出的错误不会被catch捕获到
var p2 = new promise(function() {
    setTimeout(function() {
        throw 'Uncaught Exception!'
    }, 1000)
})

p2.catch(function(e) {
    console.log(e); // 不会执行
})

// 在resolve（）后面抛出的错误会被忽略
var p3 = new Promise(function(resolve, reject) {
    resovle();
    throw 'Slienced Exception';
});

p3.catch(function(e) {
    console.log(e) //不会执行
})

For example:

let isLoading = true;

fetch(myRequest).then(function(response) { 
    var contentType = response.headers.get('content-type');
    if(contentType && contenttype.includes('application/json')) {
        return response.json();
    }
    throw new TypeError('Oops, we haven`t got JSON');
}).then(function(json) {
    /* process your JSON further */
}).catch(function(error) {
    console.log(error);
}).finally(function() {
    isLoading = false;
})

Promise.prototype.then()

then()方法返回一个Promise。它最多需要有两个参数： Promise的成功和失败情况的回调函数。

Promise.prototype.race()

Promise.race(iterable)方法返回一个promise。一旦迭代器中的某个promise解决或者拒绝，返回的promise就会解决或拒绝；

Javascript Demo

var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
})

var promise2 = new Promise(function(resolve, reject) {
    settimeout(resolve, 100, 'two');
})

Promise.race([promise1, promise2]).then(function(value) {
    console.log(value);
    // Both resolve, but promise2 is faster
})
// excepted output: 'two'

The result of below demo:

> "two"

Description

race函数返回一个Promise，它将于第一个传递的promise相同的完成方式被完成。它可以是完成（resolve），也可以是失败（reject），这要取决于第一个完成的方式是两个中的哪一个。如果传的迭代是空的，则返回的promise将永远等待。如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺，则Promise.race将解析为迭代中找到的第一个值。

Javascript Demo

// we are passing as argument an array of promises that are already resolved, to trigger Promise.race as soon as possible
var p = Promise.race([Promise.resolve(33), Promise.resolve(44)]);

// immediately logging the value of p
console.log(p);

// using setTimeout we can execute code after the stack is empty
setTimeout(function() {
    consle.log('the stack is noe empty');
    console.log(p);
})

// logs, in order:
// Promise{<state>:"pending"}
// the stack is now empty
// Promise{<state>:"fulfilled", <value>:33}

使用Promise.race - setTimeout的示例

var p1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
})

var p2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'two');
})

Promise.race([p1, p2]).then(function(value) {
    console.log(value); // 'two'
    // 两个都完成了，但是p2更快
})

var p3 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'three');
})
   
var p2 = new Promise(function(resolve, reject) {
    setTimeout(reject, 500, 'four');
})
   
Promise.race([p3, p4]).then(function(value) {
    console.log(value); // 'three'
    // p3更快，所以它完成了
}， function(reason) {
    // 未被调用
})

var p5 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'five');
})

var p6 = new Promise(function(resolve, reject) {
    setTimeout(reject, 100, 'six')
});

Promise.race([p5, p6]).then(function(value) {
    // 未被调用
}， function(reason) {
    console.log(reason); // "six"
    // p6更快， 所以它失败了
})

Promise.reject()

Promise.reject(reason)方法返回一个带有拒绝原因reason参数的Promise对象

Promise.resolve()

Promise.resolve(value)方法返回一个以给定值解析后的Promise对象。但如果这个值是个thenable（既带有then方法），返回的promise会跟随这个thenable的对象，采用它的最终状态（指resolve/reject/pending/settled）；如果传入的value本身就是promise对象，则该对象作为Promise.resolve方法的返回值返回；否则以该值为成功状态返回promise对象。

var promise1 = Promise.resolve(123);

promise1.then(function(value) {
    console.log(value);
    // expected output: 123
});

The result of below demo

> 123

More Info:

Promise