es6-Promise解决回调地狱
2019-09-11
1、什么是回调地狱?
假如我们有很多异步事件，而这些异步事件又有很紧密的联系，比如一个异步事件要依赖另一个异步事件的返回值，看下面的：
$.ajax({
url: '',
data: {},
type: 'post',
dataType: JSON,
success: function (res) {
$.ajax({
url: '',
data: res.data,
type: 'post',
dataType: JSON,
success: function (res1) {
$.ajax({
url: '',
data: res1.data,
type: 'post',
dataType: JSON,
success: function (res2) {
$.ajax({
url: '',
data: res2.data,
type: 'post',
dataType: JSON,
success: function (res3) {
console.log(res3)
}
})
}
})
}
})
}
})
是不是进入了一环套一环的地狱里面。我们可以简单处理下：
function ajax1() {
$.ajax({
url: '',
data: {},
type: 'post',
dataType: JSON,
success: function (res) {
ajax2(res.data)
}
})
}
function ajax2(data) {
$.ajax({
url: '',
data: data,
type: 'post',
dataType: JSON,
success: function (res) {
ajax3(res.data)
}
})
}
function ajax3(data) {
$.ajax({
url: '',
data: data,
type: 'post',
dataType: JSON,
success: function (res) {
console.log(res)
}
})
}
ajax1();
这样虽然把每个ajax请求放在了函数里面，不用把所有请求放在一个方法里面，但实际上还是在函数里面一层一层的嵌套来实现，很不便于阅读和维护。
2、看看promise是如何解决的
promise的出现就是为了解决异步编程中的回调问题，它提供了统一的 API
const ajax1 = new Promise(function (resolve,reject) {
$.ajax({
url: '',
data: {},
type: 'post',
dataType: JSON,
success: function (res) {
resolve(res.data)
}
})
})
function ajax2 (data) {
return new Promise(function (resolve,reject) {
$.ajax({
url: '',
data: data,
type: 'post',
dataType: JSON,
success: function (res) {
resolve(res.data)
}
})
})
}
function ajax3 (data) {
return new Promise(function (resolve,reject) {
$.ajax({
url: '',
data: data,
type: 'post',
dataType: JSON,
success: function (res) {
resolve(res.data)
}
})
})
}
ajax1.then(function (data) {
return ajax2(data)
}).then(function (data) {
return ajax3(data)
})
这就很很好的解决了回调地狱的问题
