什么是回调地狱？解决回调地狱的方法

什么是回调地狱？（代码执行顺序的一种操作（解决异步））

回调地狱的概念：回调函数里面嵌套回调函数。

     //地狱回调setTimeout(function () {  //第一层console.log('111');//等3秒打印111在执行下一个回调函数setTimeout(function () {  //第二层console.log('222');//等2秒打印222在执行下一个回调函数setTimeout(function () {   //第三层console.log('333');//等一秒打印333}, 1000)}, 2000)}, 3000)

执行结果：

解决回调地狱的方法：

方法一：使用promise链式调用

     //promise解决function fn(str) {var promise = new Promise(function (success, error) { //success 是成功的方法  error是失败的方法  //处理异步任务var flag = true;setTimeout(function () {if (flag) {success(str)}else {error('失败')}})})return promise;}fn('111').then((res) => { //then是成功执行的方法 返回的还是一个promise对象console.log(res);//打印111  res是执行return fn('222');}).then((res) => {console.log(res);return fn('333')}).then((res) => {console.log(res);}).catch((res) => { //catch是失败执行的方法console.log(res);})

执行结果：可以看到还是会嵌套，存在回调函数，不是最完美的解决方法

方法二：使用 async/await 终极解决方案（无回调函数，同步执行）

//1.封装一个返回promise的异步任务function fn(str) {var promise = new Promise(function (success, error) {var flag = true;setTimeout(function () {if (flag) {success(str)} else {error('处理失败')}})})return promise;}//2.封装一个执行上述异步任务的async函数async function test() {try{var res1 = await fn('111');  //await直接拿到fn()返回的promise的数据，并且赋值给resvar res2 = await fn('222');var res3 = await fn('333');console.log(res1);console.log(res2);console.log(res3);} catch(error){console.log("抛出异常错误: "+error);}}//3.执行函数test();

什么是回调地狱？解决回调地狱的方法相关推荐

什么是地狱回调？解决回调地狱的两种方法
地狱回调概念:回调函数套回调函数的情况就叫做回调地狱, //地狱回调setTimeout(function () { //第一层console.log('武林要以和为贵');setTimeout(fu ...
什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？
什么是回调函数?回调函数有什么缺点?如何解决回调地狱问题? 参考文章: (1)什么是回调函数?回调函数有什么缺点?如何解决回调地狱问题? (2)https://www.cnblogs.com/kzxi ...
Promise使用，return的运用，解决回调地狱
Promise使用,return的运用,解决回调地狱回调地狱 httpBookModel.getHotList().then((res) => {console.log(res)httpBoo ...
Promise解决回调地狱写法
这里可以使用Promise来解决回调地狱的问题! 那么我们这里有一个需求,就是我们需要读取三个 .txt 文件,需要第一个文件读取完成后才能读取第二个文件以此类推. 那么这里来一个Promise的错误 ...
回调函数与回调地狱及其解决方法 | JavaScript
JavaScript中的回调函数与回调地狱及其解决方法以下为整理的思维导图图片版+文字版文末附有参考文章链接知识点思维导图版一.什么是回调函数 1.MDN的定义回调函数是作为参数传给另一个 ...
Promise(解决回调地狱)
Promise() 对象: 存在三种状态: //进行时 pending// 成功 resolve//失败 reject 执行语句: let promise= new Promise((resolve, ...
ES6----promise方法解决回调地狱问题
ES6–promise方法解决回调地狱问题要解决回调地狱问题,首先要了解回调地狱的产生是由于早期的javascript只支持回调函数来表现异步操作完成,由于业务逻辑复杂时,就会出现一个串联多个异步操 ...
promise解决回调地狱（callback hell）
promise解决回调地狱(callback hell) 具体参考阮一峰,ES6标准入门在我们需要对一个异步操作进行频繁的调用的时候,且要保证一步操作的顺序,可能会出现回调地狱(callback ...
Promise的基础使用与生成器配合Promise解决回调地狱
经过几天对Promise的了解,希望可以帮助到大家. 什么是回调地狱说起回调地狱首先想到的是异步在js中我们经常会大量使用异步回调,常用的ajxa请求来看下面这段代码: fun ...
回调地狱的产生，以及如何解决回调地狱
前言在了解回调地狱之前,我们先来了解两个概念: 1. 回调函数当一个函数作为参数传入另一个参数中,并且它不会立即执行,只有当满足一定条件后该函数才可以执行,这种函数就称为回调函数.我们熟悉的定时器 ...

什么是回调地狱？解决回调地狱的方法

什么是回调地狱？解决回调地狱的方法相关推荐

最新文章

热门文章