promise

当我们遇到异步请求的时候会用到promise对这个异步操作进行封装。

    <script>
        //参数本身是一个函数,而函数又有两个参数，一个是resolve,一个是reject
        //   new promise(参数)
        //resolve与reject默认本身又是一个函数

        new Promise((resolve, reject) => {
            //第一次网络请求
            setTimeout(() => {
                //这要执行一次resolve()就会去执行then()函数
                resolve()
                    // console.log("111");
            }, 1000)

        }).then(() => {
            //第一次网络请求拿到的代码
            console.log("1111111");
            console.log("1111111");
            console.log("1111111");
            console.log("1111111");
            console.log("1111111");
            return new Promise((resolve, reject) => {
                //第二次网络请求
                setTimeout(() => {
                    resolve()
                }, 2000)

            })

        }).then(() => {
            //第二次网络请求拿到的代码
            console.log("222222");
            console.log("222222");
            console.log("222222");
            console.log("222222");
            console.log("222222");
            return new Promise((resolve, reject) => {
                //第三次网络请求
                setTimeout(() => {
                    resolve()
                }, 3000)
            })

        }).then(() => {
            //第三次网络请求拿到的代码
            console.log("333333");
            console.log("333333");
            console.log("333333");
            console.log("333333");
        })


        //另一种解释
        new Promise((resolve, reject) => {
            //成功调用resolve
            //resolve(data) 把data传入到then中
            resolve('hello');
            //失败调用reject
            reject('err');

        }).then(data => {
            console.log('成功了');
            console.log('成功了');
            console.log('成功了');
            console.log('成功了');
 //如果失败了，进行捕获错误，用catch,也就是请求失败时，要干什么
        }).catch(err => {
            console.log(err);
        })
    </script>

promise三种状态

另一种写法

 //另一种写法
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('hello')
                reject('err message')

            }, 1000);
        }).then((data) => {
            console.log(data);
        }, err => {
            console.log(err);
        })

案例

 //promise的链式调用
        //案例：网络请求：aaa->自己处理（10行）
        //处理：aaa111->自己处理（10行）
        //处理：aaa111222->自己处理
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000);
        }).then((res) => {
            //自己处理10行代码
            console.log(res, "第一层的10行处理代码");
            //对我们的结果第一次处理
            return new Promise((resolve, reject) => {
                resolve(res + '111');
            })
        }).then((res) => {
            console.log(res, "第二层的10行处理代码");
            //对我们的结果第二次处理
            return new Promise((resolve, reject) => {
                resolve(res + "222")
            })


        }).then((res) => {
            console.log(res, '第三层的10行处理代码');
        })


        //上面这段代码的简写
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("aaa")
            }, 1000);
        }).then((res) => {
            console.log(res, '第一层的10行处理代码');
            return Promise.resolve(res + "111");
        }).then(res => {
            console.log(res, '第二层的10行处理代码');
            return Promise.resolve(res + "222")
        }).then(res => {
            console.log(res, "第三层处理代码");
        })

        //上面的代码继续简写
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000);
        }).then((res) => {
            console.log(res, '第一层的10行代码');
            return res + '111'
        }).then((res) => {
            console.log(res, "第二层的10行代码");
            return res + '222'
        }).then((res) => {

            console.log(res, "第三层的10行代码");
        })




        //上面这段代码如果遇到错误
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("aaa")
            }, 1000);
        }).then((res) => {
            console.log(res, '第一层的10行处理代码');
            return Promise.reject("error message");
            //抛出异常，相当于生成了个错误，也会执行下面的catch
            throw "error message"
        }).then(res => {
            console.log(res, '第二层的10行处理代码');
            return Promise.resolve(res + "222")
        }).then(res => {
            console.log(res, "第三层处理代码");
        }).catch((err) => {
            console.log('如果遇到错误，前面的then就不会执行了');
        })



        //上面的代码如果遇到错误
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000);
        }).then((res) => {
            console.log(res, '第一层的10行代码');
            return res + '111'
        }).then((res) => {
            console.log(res, "第二层的10行代码");
            return res + '222'
        }).then((res) => {

            console.log(res, "第三层的10行代码");
        })