文章目录

• 前言
• 一、Promise构造函数
• 二、一个例子
• 三、总结

前言

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

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

`

一、Promise构造函数

es5写法

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

es6写法

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

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

二、一个例子

例子可以直接放进JavaScript测试

//隔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)
 })

三、总结

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