社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
不想了解过程,请直接划到最后.看最终效果
更多内容欢迎访问我的博客:
林除夕linzowo.ml通俗的说就是回调函数嵌套回调函数的问题,如下
// 声明一个函数
function foo(data, callback) {
data++;
callback(data);
}
// 回调地狱
foo(1, function(data) {
foo(data, function(data) {
foo(data, function(data){
foo(data, function(data){
foo(data, function(data){
foo(data, function(data){
console.log(data);// 7
})
})
})
})
});
});
怎么样是不是很刺激,稍微复杂一点,保证你看到头晕眼花。
将这种嵌套式
的调用改造为串联式
,那么下面我们就来看看怎么解决.
如果不传入执行函数,那么它只是在形式上是异步操作,但是没有任何的异步实操
如下```javascript // 创建一个形式上的异步操作 ===> 没有任何具体的异步操作(例如ajax,jsonp等),我们知道它是异步操作但是不知道它究竟在操作什么 var p = new Promise();
// 创建一个实际的异步操作 var p = new Promise(function(){ // 在这里执行一个异步操作,例如:ajax请求 }) ```
```javascript // 为了防止我们的异步操作函数在Promise实例化过程中被执行,将其封装在一个函数中,在对应的时机去使用它 function sendAjax() { // 创建并返回一个包含实际的异步操作的Promise对象 return new Promise(function(resolve,reject) { // 在这里执行一个异步操作,例如:ajax请求
if('ajax请求出现错误') return reject('错误内容')
resolve('成功之后需要用到的数据或内容')
});
}
// 接收实例对象 var p = sendAjax()
// 通过.then方法指定成功和失败的回调 p.then(function(data){ // 默认第一个是成功的回调 }, function(err){ // 默认第二个是失败的回调 }) ```
注意:
在调用.then的时候,成功的回调(resolve)是必须的,失败的回调(reject)可以不传递
// 为了防止我们的异步操作函数在Promise实例化过程中的执行,将其封装在一个函数中
function sendAjax(data) {
// 创建并返回一个包含实际的异步操作的Promise对象
return new Promise(function(resolve,reject) {
// 在这里执行一个异步操作,例如:ajax请求
if('ajax请求出现错误') return reject('错误内容')
resolve('成功之后需要用到的数据或内容')
});
}
// 接收实例对象
var p = sendAjax(data)
// 通过.then方法指定成功和失败的回调
p.then(function(data){
// 默认第一个是成功的回调
}, function(err){
// 默认第二个是失败的回调
})
// ========================
// 串联解决回调地狱问题
sendAjax(data)
.then(function(newData1){
// newData就是异步操作得到的数据或内容
// 这里用来放成功之后如何处理
// 数据处理完成后如果还需要执行嵌套的类似操作
return sendAjax(newData2)
})
.then(function(newData3){
// newData就是异步操作得到的数据或内容
// 这里用来放成功之后如何处理
// 数据处理完成后如果还需要执行嵌套的类似操作
return sendAjax(newData4)
})
.then....
.then(function(result){
// 结束数据嵌套处理,输出数据
console.log(result)
})
有两种情况,一种会阻止后续执行,一种不会
sendAjax(data)
.then(function(newData1){
// newData就是异步操作得到的数据或内容
// 这里用来放成功之后如何处理
// 数据处理完成后如果还需要执行嵌套的类似操作
return sendAjax(newData2)
},function(err){
// 在这里执行一个处理失败信息的操作
// 处理完成后返回下一个要处理的对象,这样就不会阻止后续操作
return sendAjax(newData2)
})
.then(function(newData3){
// newData就是异步操作得到的数据或内容
// 这里用来放成功之后如何处理
// 数据处理完成后如果还需要执行嵌套的类似操作
return sendAjax(newData4)
})
sendAjax(data)
.then(function(newData1){
// newData就是异步操作得到的数据或内容
// 这里用来放成功之后如何处理
// 数据处理完成后如果还需要执行嵌套的类似操作
return sendAjax(newData2)
})
.then(function(newData3){
...
})
.catch(function(err){
// 输出错误信息
// 这种方式捕获异常和错误,只要前面任何一个.then出现问题都会终止整个执行链,然后抛出异常
})
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!