Promise详解与用法

1.简介

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

Promise里面经常保存了未来才会结束的事件(通常是一个异步操作)

有了Promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')

2.promise的基本用法

代码案例

  const p=new Promise((resolve,reject)=>{
            //异步
            setTimeout(()=>{
                console.log(111);
                // resolve('大家好，我是焦恩俊');//修改promise的状态       成功
                reject('焦恩俊去拍戏了，不理你');
            },1000);
        });

2.1 promise的三种状态

（1）有三种状态

pending 进行中

fulfilled 已成功

rejected 已失败

（2）状态一旦改变，不可逆

pending---- fulfilled resolved 成功

pending----rejected rejected 失败

3.then和catch方法

then方法：有两个参数，第一个为成功的回调；第二个为失败的回调 参数可选

catch:捕获失败或异常

推荐使用 ：then().catch()

代码案例：

       // p.then(rst=>{
        //     console.log(rst);
        //     return "hello"
        // },err=>{
        //     console.log(err);
        // })
        // .then(msg=>{
        //     console.log('run.......:',msg);
        //     return "world"
        // },err0=>{
        //     console.log('失败111');
        // }).then(msg1=>{
        //     console.log("run111........:",msg1);
        // })
        
        
                p.catch(err=>{
            console.log('xxx');
            console.log(err);
        }).then(rst=>{
            console.log(111);
        })

4.链式调用

then()函数内部的返回值：

• 非promise 会作为参数传递给下一个then的成功的回调

• 返回promise 会成为下一个then的promise

代码案例：

 function fn1() {
            let p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log('111');
                    resolve()
                }, 1500)
            });
            return p;
        }

        function fn2() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log('222');
                    resolve();
                }, 1000)
            })
        }

        function fn3() {
            setTimeout(() => {
                console.log('333');
            }, 500)
        }

        // fn1()
        // fn2()
        // fn3()
        //希望  1--- 2---3

        // fn1().then(() => {
        //   return  fn2()
        // }).then(()=>{
        //     fn3()
        // })

        //调用resolve----成功的回调-----fn2

        fn1().then(fn2).then(fn3);//终极目的  以同步的方式写异步代码

5.应用

使用promise封装ajax请求

代码案例：

function ajax({
    method = "GET",
    url = "",
    data
}) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onreadystatechange = function () {
            if (this.status == 200 && this.readyState == 4) {
                resolve([null, this.responseText])
            } else if (this.status != 200 && this.readyState == 4) {
                resolve(["服务器异常", null])
            }
        }
        xhr.send(data ? data : null);
    })
}

6.Promise.all()

该方法用于将多个（p1,p2,p3） Promise 实例，包装成一个新的 Promise 实例

则新的promise的状态取决于p1,p2,p3:

1)当p1,p2,p3都成功的时候，新的promise变为fulfilled状态

2)若p1,p2,p3中有一个变为失败状态，则新的promise立即变为失败状态

代码案例：

 let p1 = new Promise((resolve, reject) => {
            //网络请求
            setTimeout(() => {
                reject(111)
            }, 1000)
        });

        let p2 = new Promise((resolve, reject) => {
            //网络请求
            setTimeout(() => {
                reject(222)
            }, 2000)
        });

        let p3 = new Promise((resolve, reject) => {
            //网络请求
            setTimeout(() => {
                reject(333)
            }, 3000)
        });
        
                // let p=Promise.all([p1,p2,p3]);
        // p.then(rst=>{
        //     console.log('成功：',rst);//结果为三个promise数据组成的数组
        // }).catch(err=>{
        //     console.log('失败：',err);
        // })

7.Promise.race()

该方法同样是将多个 Promise 实例(p1,p2,p3)，包装成一个新的 Promise 实例。

新的promise状态取决于p1,p2,p3 中最先完成的状态

代码案例：

    let p = Promise.race([p1, p2, p3]);
        p.then(rst => {
            console.log('成功：', rst);//结果为三个promise数据组成的数组
        }).catch(err => {
            console.log('失败：', err);
        })