ES6中的Promise对象与async和await方法详解

时间:2023-02-03 简单长庚人气:0

promise存在的意义：解决异步回调地狱问题
三种状态：pending（进行中）、fulfilled（已成功）、reject（已失败）

Promise是es6引入的异步编程薪解决方案，语法上promise就是一个构造函数，用来封装异步操作病可以获取其成功或失败的结果。

Promise构建出来的实例存在以下方法： then() 是实例状态发生改变时的回调函数，第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数 catch() 用于指定发生错误时的回调函数 finally() 用于指定不管 Promise 对象最后状态如何，都会执行的操作

1）promise构造函数：promise（excutor）{}

2）promise.protiotype.then方法

3）promise.prototype.catch方法

<script>
 //如何接收回调地域
        function aaa() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(1);
                    console.log("执行了aaa");
                }, 2000)
            })
        }
        function bbb() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(2);
                    console.log("bbb");
                }, 3000)
            })
        }
        function ccc() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(3);
                    console.log("ccc");
                }, 3000)
            })
        }

        function fn1() {
            var sum = 0;
            aaa().then((res) => {//返回promise对象
                sum = sum + res;
                return bbb();
            }).then((res) => {
                sum = sum + res;
                return ccc();
            }).then((res) => {
                sum = sum + res;
                console.log("sum", sum);
                // return sum
            })
        }
        // fn1();

        //promise对象，用于处理多个异步，（传入的参数是一个数组），在所有异步都执行完毕才会触发，都成功才触发
        //比如一个页面上需要等待多个ajax请求，然后才正常显示页面
        //只要有一个失败则为失败
        let a = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(3);
                console.log("a");
            }, 3000)
        })
        let b = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(6);
                console.log("b");
            }, 3000)
        })
        // Promise.all([a, b]).then((result) => {
        //     console.log("result", result);
        // }).catch((err) => {
        //     console.log("err", err);
        // });

        //Promise.race 执行时间快执行，那个promise执行的快，就选哪个
        //不管结果本身，是成功状态还是失败状态，只看执行时间
        Promise.race([a, b]).then((res) => {
            console.log("成功了", res);
        }).catch(err => {
            console.log("err", err);
        })
</script>

promise的两个方法all和race见上述

Promise封装的ajax

 <script>
        const p = new Promise((resolve, reject) => {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化
            xhr.open("get", "");
            //3.发送
            xhr.send();
            //4.绑定事件，处理响应结果
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState == 4) {
                    //判断响应状态码200-299
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //表示成功
                        resolve(XHR.response);
                    } else {
                        //如果失败
                        reject(xhr.status)
                    }
                }
            }
        })

        //指定回调
        p.then(function (value) {
            console.log(value);
        }, function (reason) {
            console.log(reason);
        })
    </script>

async和await方法

async 是es7才有的一个关键字，和promise对象有很大的关联

async 标识的函数，必定返回promise对象

await 关键字只能放在 async标识的函数中

作用就是等待获取promise返回的内容，也就是resolve和reject的值

<script>
 		//async 返回的是一个promise对象
        // async function fn() {
        //     // return "123"
        //     //如果返回的不是一个promise对象，则返回的就是一个成功的promise对象
        //     //抛出错误 返回的是一个失败的promise对象
        //     // throw new Error('出错了！')
        //     //返回的结果是一个promise对象
        //     return new Promise((resolve, reject) => {
        //         resolve('成功的数据');//返回的也是promise成功的值
        //         // reject("失败的内容");//返回的也是失败的neirong
        //     })
        // }
        // const result = fn();
        // result.then(value => {
        //     console.log(value);
        // }, reason => {
        //     console.warn(reason)
        // })
        // console.log(result);

    
        //await 表达式
        //1.await必须写在async函数中  2.await右侧的表达式一般为promise对象
        //3.await 返回的是promise成功的值 4.await的promise失败了，就会抛出异常，需要通过try...catch捕获处理
        const p = new Promise((resolve, reject) => {
            // resolve("成功的值!");
            reject('失败啦！');
        })
        //await要放在async函数中
        async function main() {
            try {
                let result = await p;
                console.log(result);
            } catch (e) {
                console.log(e);
            }

        }
        //调用函数
        main();
</script>

加载全部内容