基本概念

个人明白就是运用同步编程的写法完成异步编程操纵。

const promise = new Promise((resolve, reject) => {
    //some asynchronous  code
    setTimeout(() => {
        console.log('实行完成');
        resolve('some data');
    }, 2000);
});

Promise 吸收一个函数作为参数，函数有两个参数，resolve 和 reject 离别示意异步操纵实行后胜利的回调函数和失利的回调函数。

Promise 实例后立时实行。所以一般采纳一个函数包括它

function runAsync() {
    return new Promise((resolve, reject) => {
        //some asynchronous  code
        setTimeout(() => {
            console.log('实行完成');
            resolve('some data');
        }, 2000);
    });
}
runAsync().then((data) => {
    console.log(data);//能够运用异步操纵中的数据
})

runAsync() 实行完挪用 then 要领，then() 就相当于我们之前写的回调函数。

resolve 和 reject

function paramTest(){
    return new Promise((resolve, reject) => {
        let number = Math.ceil(Math.random() * 10);
        if (number < 5) {
            resolve(number);
        }else{
            reject('out of range');
        }
    })
}
paramTest().then((number) => {
    console.log('resolved');
    console.log(number);
},(reason) => {
    console.log('rejected');
    console.log(reason);
})

Promise 有三种状况：pending（进行中）、fulfilled（已胜利）和 rejected（已失利）

paramTest() 例子有两种状况：

• 当 number < 5 时，我们认为是胜利状况，将状况从 pending 变成 fulfilled
• 当 number >= 5 时，我们认为是失利状况，将状况从 pending 变成 rejected

所以
paramTest() 的实行效果：

catch的用法

我们继承挪用
paramTest 要领举例

paramTest().then((number) => {
    console.log('resolved');
    console.log(number);
    console.log(data); //data为未定义
},(reason) => {
    console.log('rejected');
    console.log(reason);
}).catch((err) => {
    console.log(err);
})

catch 要领实在就是 .then(null, rejection) 的别号，也是用来处置惩罚失利失利的回调函数，然则另有一个作用：当 resolve 回调中假如涌现错误了，不会梗塞，会实行 catch 中的回调。

all的用法

const p = Promise.all([p1, p2, p3]);

p.then(result => {
    console.log(result);
})

all 要领吸收一个数组参数，数组中每一项返回的都是
Promise 对象，只有当
p1, p2, p3 都实行完才会进入
then 回调。
p1, p2, p3 返回的数据会以一个数组的情势传到
then 回调中。

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p1');
    }, 1000);
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p2');
    }, 3000);
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//3秒后输出['p1', 'p2']

race的用法

const p = Promise.race([p1, p2, p3]);

p.then(result => {
    console.log(result);
})

race 的用法与
all 千篇一律，差别的是
all 要领须要参数的每一项都返回胜利了才会实行
then;而
race 则是只需参数中的某一项返回胜利就实行
then 回调。

以下是 race 的例子，和 all 要领对照，能够看到返回值有很明显的区分。

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p1');
    }, 1000);
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p2');
    }, 3000);
})
.then(result => result)
.catch(e => e);

Promise.race([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//1秒后输出 'p1'

点击这里检察本文中实例源代码

resloader是基于Promise完成的一个图片预加载并展现加载进度的插件，猛戳这里相识概况。假如觉得还能够的话，迎接star