对promise的理解与应用

promise

概念

promise是一个类、一个构造函数，通过new关键字生成实例；

promise是一种承诺，是异步编程的一种解决方案，（不是异步编程，只是异步编程的一种解决方案）；将异步代码的回调写法改为同步代码（只是写法同步，还是异步执行）；

它接收一个函数来作为参数，这个函数有两个参数，分别是resolve和reject；
reslove函数：将promise对象的状态从未完成变成成功，在异步操作成功时调用；
resolve（） // 返回异步操作的结果，作为参数传递出去
reject函数：将promise对象的状态从未完成变成失败，在异步操作失败时调用；
reject（） // 返回异步操作的结果，作为参数传递出去

三种状态

promise有三种状态：
pending（进行中）、
fulfilled（已成功）、
rejected（已失败）；
它的状态不收外界操作的影响，只有异步操作的结果能决定promise对象的状态；
注意：promise对象的状态一旦改变之后就不会在发生改变，不会从成功变成失败，也不会从失败变成成功；

实例方法

then（）

then（）方法有两个参数，两个参数都是函数，第一个参数处理成功状态的返回结果，第二个参数处理失败状态的返回结果；

p.then((value)=>{
	// 处理成功状态的返回结果
},(reason)=>{
	// 处理失败状态的返回结果
})

catch（）

catch（）参数处理失败状态的返回结果，可以代替then（）方法的第二个参数；

p.catch((reason)=>{
	// 处理失败状态的返回结果
})

finally（）

无论promise的状态是成功还是失败，finally（）都会执行；

promise相对于传统的回调函数的处理异步的方案，更加强大好用、增加代码的可读性；
ex：
需求：1秒钟之后打印1,2秒钟之后打印2,3秒钟之后打印3；
setTimeout处理方法：

setTimeout(() => {
       console.log(1);
       setTimeout(() => {
           console.log(2)
           setTimeout(() => {
               console.log(3)
           }, 3000)
       }, 2000)
   }, 1000)

promise解决方法：

function getData() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log(1)
                    resolve(2)
                }, 1000)
            })
        }
        getData().then((value) => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log(value)
                    resolve(3)
                }, 2000)
            })
        }).then((value) => {
            setTimeout(() => {
                console.log(value)
            }, 3000)
        }) 

由于代码的规范性，传统的settimeout解决方案，代码会不断向右缩进，不利用代码的阅读，形成回调地狱；

promise.all()

将多个promise实例包装成一个新的promise实例，
promise.all(）的参数可以不是数组，一般我们写成数组的形式，也可以是接口；

let p1 = new Promise((resolve, reject) => {
    resolve('成功1')
})
let p2 = new Promise((resolve, reject) => {
   // resolve('成功2')
     reject('失败02')
}).catch((reason) => { console.log(reason) })
let p3 = new Promise((resolve, reject) => {
    resolve('成功3')
    // reject('失败3')
})
let pall = Promise.all([p1, p2, p3])
pall.then((value) => {
    console.log(value)
}).catch((reason) => {
    console.log(reason)
})

pall的状态有p1，p2，p3的状态来决定，只有p1，p2，p3都为成功，pall的状态才为fulfilled;但是有一个失败，那么返回结果就是失败，第一个失败的实例的返回值，会传递给pall的回调函数；

如果参数的实例，自己定义了catch方法，即使reject状态，也不会触发pall的catch方法；
使用场景：多个请求合并在一起，渲染页面

promise.race()

将多个promise实例包装成一个新的promise；
promise.race区别于promise.all：只要实例中有一个先改变了状态，就会把这个实例的参数的返回值传给prace的回调函数；

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功1')
    }, 2000)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功2')
    }, 1000)
})
const prace = Promise.race([p1, p2])
console.log(prace)  // 成功2 因为p2先改变了状态，就会把p2的返回值传给prace