浅谈js中的回调地狱问题

Isis ·

更新时间:2024-11-13

· 839 次阅读

回调地狱

由多层嵌套的回调函数组成的代码称为回调地狱，多数在写阻塞执行代码的时候会产生。回调地狱的代码可读性差，很难让人弄清楚业务逻辑。

下面便是回调地狱的代码：

function callbackFn(callback){
	setTimeout(function(){
		callback()
	},1000)
}
callbackFn(function(){
	callbackFn(function(){
		callbackFn(function(){
			callbackFn(function(){console.log('回调结束')})
		})
	})
})

上面的代码执行4秒后会输出’回调结束‘，虽然达到了我们要阻塞执行的目的，但是非常不容易让人读懂，且书写麻烦。

Promise

Promise是回调地狱的解决方案之一，我们使用Promise的语法来解决回调地狱的问题，使代码拥有可读性和可维护性（ES6 规定，Promise对象是一个构造函数，用来生成Promise实例，针对所有的异步）。

Promise有三个状态：
Pending：异步的事情正在执行；
Fulfilled：异步的事情成功了；
Rejected：异步的事情失败了。

Promise的基本语法：

let p = new Promise(function(resolve,reject){
	// 此处做一个异步的事情
})
p.then(function(){})
p.catch(function(){})

1.Promise 构造函数有两个变量== resolve== 用于返回异步执行成功的函数 reject 用于返回异步执行失败的函数。配合then与catch一起使用.
2.Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
3.reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch方法。
4.then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

Promise的批处理-all：
全部成功，即为成功；只要有一个失败，即为失败。

let p1 =  new Promise(function(resolve,reject){});
let p2 =  new Promise(function(resolve,reject){});
let p3 =  new Promise(function(resolve,reject){});
Promise.all([p1,p2,p3]).then(function(){
}).catch(function(){
})

Promise的批处理-race：
得到最先结束的状态，不管是成功还是失败。

let p1 =  new Promise(function(resolve,reject){});
let p2 =  new Promise(function(resolve,reject){});
let p3 =  new Promise(function(resolve,reject){});
Promise.race([p1,p2,p3]).then(function(){
}).catch(function(){
})

Promise解决回调地狱问题：

function callbackFn(name){
	return new Promise(function(resolve, reject){
		setTimeout(function(){
			console.log(name)
			resolve()
		},1000)
	})
}
callbackFn("111").then(
	function(){return callbackFn("22")}
).then(
	function(){return callbackFn('22')}
).then(function () {
  console.log('end');
}).catch(function (err) {
  console.log(err);
})

async/await

async是协同Promise工作的，放置在函数前面，返回一个Promise对象，关键词await可以让JavaScript进行等待，直到一个promise执行并返回它的结果，JavaScript才会继续往下执行，await只能在async定义的函数内部执行。

async function f() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('done!'), 1000)
    })
    let result = await promise
    alert(result)
}
f()

作者：zyfacd

js中地狱回调 js

1024 个赞