Promise对象改善回调地狱异步操作的同步解决方案+async函数

况几

已于 2022-07-18 13:17:04 修改

阅读量249

点赞数

分类专栏： web前端文章标签： javascript 前端开发语言

于 2022-06-30 16:44:33 首次发布

本文链接：https://blog.csdn.net/angrynouse/article/details/125531866

版权

本文探讨了JavaScript中的同步与异步操作，特别是异步操作导致的回调地狱问题。通过介绍Promise对象，阐述了如何使用then()方法和链式调用来避免回调地狱。进一步讲解了Promise.all()方法在处理多个并发异步操作时的应用。最后，介绍了async/await关键字，它们结合Promise使异步代码更易于理解和维护。

摘要由CSDN通过智能技术生成

1. 同步异步

同步操作：下一个任务必须等上一个任务执行完才开始执行。先来后到，顺序执行。
异步操作：异步往往有一个或多个回调函数（callback），前一个任务结束后，执行回调函数，后一个任务在前一个任务未执行完时开始执行。所以后面的同步代码可以先出结果，前面的异步代码可能后出结果。
比如定时器就是异步操作，执行时，定时器后的同步代码会先出结果，然后比较耗时的定时器操作才会出结果。
一个进程包含多个线程，js语言是单线程的，线程中的协程可以通知代码是否先阻塞或是先执行，来协助js完成异步操作。

2. 回调地狱

回调地狱，排错难度大，代码可读性差，牵一发而动全身。所以要避免回调地狱。回调函数只有在调用的时候才会执行，一旦报错很难排查。

        function getRes(res){
   
            function getData(data){
   
                function getResult(result){
   
                    function getTitle(title){
   
                        console.log(title);
                    }
                }
            }
        }

3. promise对象 ——是一种异步操作的解决方案——避免回调函数

Promise 对象，可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。用then()解决了回调函数的问题。
将异步操作以同步的形式呈现出来，但实质还是异步操作。
ES6 规定，Promise 对象是一个构造函数，用new来生成Promise 实例。
执行 promise 的时候，异步操作成功会调用resolve()，失败会调用reject()。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

// Promise基本格式--伪代码
// Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是resolve 和reject 。它们是两个函数，由 JavaScript 引擎提供，不用自己部署
        var promise = new Promise(function(resolve, reject){
   
            // 异步的代码
            If(/*加载成功成功*/){
   
            	// resolve 成功的处理方式
            	// 将data数据给到then里面
                resolve(data);
            }else{
   
            	// reject 失败的处理方式
            	// 将error错误信息给到then里面
                reject(error);
            }
        });

        promise.then(function(data){
   
            // 成功
            console.log(data);
        },function(error