理解Promise异步编程

Promise是一个构造函数。用于解决回调地狱，使代码结构便于阅读（以同步的方式写异步）

基础用法：

1.Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject,它们是两个函数。
then方法用来具体解决回调地狱的。

let obj = new Promise((resolve,reject)=>{
    if(true){
        resolve(value)
    }else(){
        reject(error)
    }
})
obj.then().then().then()

2.then()方法接受两个回调函数作为参数。第一个回调函数是Promise实例对象的状态为resolved时调用；第二个回调函数是Promise实例对象的状态为rejected时调用。

function fn(){
    return new Promise((resolve,reject)=>{
        if(true){
            resolve(value)
        }else{
            reject()
        }
    }).then(
            value => {
                console.log('上边Promise实例对象的状态是resolved,所以我被执行了')
                console.log('我成功得到上边异步任务执行的结果 value了')
            },
            error =>{
                  console.log('上边Promise实例对象的状态是rejected,所以我被执行了，我是用来报错的')
                  console.log('error这个值不是我想要的')
            }

        )
}

3.每个Promise实例对象都有一个初始状态pending，我们可以通过异步任务执行结果的不同，来相应改变Promise实例对象的状态。
当调用resolve()函数时，实例对象的状态会由pending状态变为fulfilled（resolved）状态。执行then方法时，就会调用第一个函数参数
当调用reject()函数时，实例对象的状态由pending状态变为fulfilled（resolved）状态。执行then方法时，就会调用第二个函数参数

image.png

任务链：

任务链：异步任务层层关联，采用链式的then方法，构成了任务链。
1.then方法具体调用第一个函数参数，还是第二个函数参数，取决于上一个任务Promise实例对象的状态
2.在then方法执行完成，默认返回一个resolved状态的实例对象，如下：

new Promise((resolve, reject) => {
    reject()
})
    .then(
        () => {
            console.log(1)
        },
        () => {
            console.log(2)
        }
    )
    .then(
        () => {
            console.log(3)
        },
        () => {
            console.log(4)
        }
    )
//结果2,3

3.在then函数参数中，返回一个新的promise实例，那么下一个then方法的执行，根据该promise实例的状态

new Promise((resolve, reject) => {
    reject();
})
    .then(
        () => {
            console.log(1)
        },
        () => {
            console.log(2)
            return new Promise((resolve, reject) => {
                reject()
            })
        }
    )
    .then(
        () => {
            console.log(3)
        },
        () => {
            console.log(4)
        }
    )

4.catch（）
catc用于专门处理状态为rejected的Promise实例，等同于then方法中的第二个函数参数
catch的特点：
1.能够有限的解决无法中途终止后续任务的执行
2.catch会与then第二个函数参数执行时冲突
3.catch也默认返回一个状态为resolved的实例对象

new Promise((resolve, reject) => {
    reject('错误');
})
    .then(
        () => {
            console.log(1)
        }
    )
    .then(
        () => {
            console.log(2)
        }
    )
    .catch((err)=>{
        console.log(err)
    })
    .then(()=>{
        console.log('catch之后')
    })
// '错误' 
//'catch之后'

Promise的all()和race()

1.all方法和race方法都是用于并行执行多个异步任务。它们接受一个数组为参数.
2.all用法：
Promise.all([promise1, promise2]).then(success1, fail1)
promise1和promise2都成功才会调用success1
3.race用法
Promise.race([promise1, promise2]).then(success1, fail1)
prmise1和promise2谁先执行完成，就以谁的状态为标准，就认为是race的成功或失败。

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(1)
        resolve(10)
    }, 2000)
});

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(2)
        resolve(20)
    }, 3000)
})

Promise.all([p1, p2]).then(arr => {
    console.log(arr)
})
//all方法依次输出： 1，2，[10,20]

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(1)
        resolve(10)
    }, 2000)
});

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(2)
        resolve(20)
    }, 3000)
})

Promise.race([p1, p2]).then(num=> {
    console.log(num)
})
//race方法依次输出 1,10,2

async和await

async function fo(){
    //await前面的代码
    await bar()
    //await后面的代码
}
async function bar(){
    // do something ···
}

（1）await前面的是同步代码
（2）await bar() 可以转化成Promise.resolve(bar())
（3）await后面的代码被放入Promise.then()方法里
转化如下：

function foo(){
    //await前面代码
    Promise.resolve(bar()).then(()=>{
        //await 后面的代码
    })
}