JavaScript Promise解析一个例子就够了

---

前言

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

一个例子即可让你逐步运用熟悉！

---

`

一、Promise构造函数

es5写法

new Promise(function (resolve, reject) {
    // 要做的事情...
});

es6写法

new Promise( (resolve, reject)=>{
    // 要做的事情...
});

Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。

resolve:执行成功的返回值，如：resolve（‘执行成功’）
reject：执行失败的返回值，如：reject（‘执行失败’）

注意：new promise（fn）一旦创建就会直接执行函数，不需要调用，所以一般写在函数内部，再进行调用函数，见下面例子！

二、一个例子

例子可以直接放进JavaScript测试

异步编程promise的测试函数

//隔1秒打印promise ce1
function ce1() {
    console.log('开始执行ce1')
    let p = new Promise((rv, rf) => {
        setTimeout(() => {
            console.log('promise ce1')
            rv('A'); //执行成功后继传递数据
        }, 1000);
    })
    //返回promise对象以便进行then的链式操作
    return p;
}
//隔2秒打印promise ce2
function ce2() {
    console.log('开始执行ce2')
    let p = new Promise((rv, rf) => {
        setTimeout(() => {
            console.log('promise ce2')
            rv('B'); //执行成功后继传递数据
        }, 2000);
    })
    return p;
}
//隔3秒打印promise ce3
function ce3() {
    console.log('开始执行ce3')
    let p = new Promise((rv, rf) => {
        setTimeout(() => {
            console.log('promise ce3')
            rv('C'); //执行成功后继传递数据
        }, 3000);
    })
    return p;/
}

1、按异步操作先后顺序执行的2种方式

//顺序异步执行方式1：
//then表示前面异步函数体执行完毕后再执行后面的异步函数
//e表示从前面异步操作返回的fv返回值，也可以不要返回值直接进行后面函数体的执行
 ce3().then(e => {
         console.log(e + 'a')
         return ce1();
    }).then(e => {
        console.log(e + 'b')
         return ce2();
    }).catch(err => {  
//catch：错误抓取打印，跟fv功能类似，错误时不报错直接执行下面的函数体
        console.log(err)
    })


// 顺序执行异步2:
//异步函数标记async，函数内用await promise函数，顺序执行
async function as() {
     await ce3();
     await ce1();
     await ce2();
 }
 as();

·执行结果

2、Promise.all([promise1(),...])：
异步操作多项并行：异步操作都会同时执行，都执行完毕后，再进行后面的then抓取所有异步操作的返回值rv1，rv2，rv3…,返回数组

 Promise.all([ce1(), ce2(), ce3()]).then(e => {
     console.log(e)
 })

执行结果

3、Promise.race([promise1(),...])：
优先完成执行：异步操作都会同时执行，但then只会抓取最快执行完毕的异步操作的返回值

 Promise.race([ce1(), ce2(), ce3()]).then(e => {
     console.log(e)
 })

执行结果

三、总结

有什么问题都可以在评论区交流哦！