web前端—前端三剑客之JS-ES6(14)：异步编程处理之Promise对象

最新推荐文章于 2023-12-28 16:16:04 发布

觅远

最新推荐文章于 2023-12-28 16:16:04 发布

阅读量159

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/JBY2020/article/details/119494070

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

异步和同步

异步：任务分段按特定顺序执行，适用于之间有结果或者数据依赖的任务。

同步：任务各自执行，之间不影响，适合之间没有数据关联的任务。

Promise对象使用

Promise 是异步编程的一种解决方案，Promise可以比作一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise 是一个对象，可以获取异步操作的消息。它提供了统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise构造函数的参数：

接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不需要自己部署。

resolve：将Promise对象的状态从“未完成 pending”变为“成功 resolved”，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去(传递给then方法, 还可以传一些参数)；

reject：将Promise对象的状态从“未完成 pending”变为“失败 rejected”，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

        const sing = function () {
            return new Promise(function (resolve, reject) {
                setTimeout(() => {
                    console.log('正在唱歌');
                    resolve('唱歌中...');   //通常通过条件判断来执行resolve或reject函数
                    // reject('有意外发生');
                }, 2000);
            });
        };

        const dance = function () {
            return new Promise(function (resolve, reject) {
                setTimeout(() => {
                    console.log('正在跳舞');
                    resolve('跳舞中...');
                }, 2000);
            });
        };

        const walkoff = function () {
            return new Promise(function (resolve, reject) {
                setTimeout(() => {
                    console.log('表演结束，退场');
                    resolve('退场中...');
                }, 3000);
            });
        };

promise对象的方法

then方法

then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数

catch方法

catch方法是.then(null, rejected)或.then(undefined, rejected)的别名，用于指定发生错误时的回调函数。与传统的try/catch代码块不同的是：如果没有使用catch方法指定错误处理的回调函数，Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。(promise内部的报错不会终止整个js程序的运行, 而其他普通函数内一旦报错, 程序运行就会终止)

finally方法

同异常处理
        // 通过函数方法的then方法对需要异步的函数进行异步执行，then中的参数为一个方法，可以使用链式方法，如下
        sing()
            .then(
                function (data) {
                    console.log(data);
                    return dance();
                })
            .then(
                function (data) {  // data返回的是上一个方法（上一个then）的resolve值
                    console.log(data);
                    return walkoff();
                })
            .then(
                function (data) {
                    console.log(data);
                    console.log('表演结束后，紧张的心情没有了')
                })
            .catch(
                function (data) {
                    console.log(data);
                })
            .finally(
                function () {
                    console.log('掌声响起来');
                })

all方法

将多个 Promise 实例，包装成一个新的 Promise 实例

p的状态由p1、p2、p3决定，分成两种情况。

只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

注意，如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法
        // 同步Promise.all方法实现同步，all的参数为一个数组对象，数组中是要同步执行的方法
        Promise.all([sing(), dance()]).then(
            function (data) {
                // console.log(data);  // data为一个数组对象
                console.log('完成任务');
                return walkoff();
                })
            .then(     // 同步执行和异步执行可以嵌套使用
                function () {
                    console.log('表演结束后，紧张的心情没有了');
                })
race方法

race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
        let p_all = Promise.all([sing(), dance()]);
        let p_race = Promise.race([sing(), dance()]);

        console.log(p_all);
        console.log(p_race);

resolve方法与reject方法

有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。all或是race方法的参数如果有不是promise对象的, 那么就会用resolve的方法自动转化
        let p1 = Promise.resolve('正常输出');
        p1.then(function (resolve,reject) {
            console.log(resolve);
            // console.log(reject); 
        });
        // console.log(p1.then());

        let p2 = Promise.reject('出现错误了');
        p2.then(null, function (resolve, reject) {
            // console.log(reject);   // undefined
            console.log(resolve);   // 出现错误了
        });