回调地狱解决历程
缘由
在页面中进行数据请求时,当存在ajax数据请求条件,像是下拉刷新,上拉刷新等。在进行ajax数据请求②的过程中,当ajax数据①请求结束后才执行②数据请求条件要求。
嵌套
原始解决嵌套条件数据请求
存在的问题
1、嵌套函数存在耦合性,一旦有所改动,就会牵一发而动全身
2、嵌套函数一多,就很难处理错误
3、回调函数还存在着别的几个缺点,比如不能使用try catch捕获错误,不能直接return。
$.ajax({ //数据请求①
url: '地址1',
method: 'get',
success: function(data){
console.log('请求①执行')
$.ajax({ //数据请求②
url: '地址2',
method: 'get',
success: function(data){
console.log('请求②执行')
}
})
}
})
promise方式解决条件数据请求
存在问题
1、书写代码的方式,明显的表示异步操作
2、当存在多个参数传递时,比较复杂,易出错,像是:
Promise.then((①,②,③,④)=>{first(①,②,③,④)})
.then((①,②,③,④)=>{first(①,②,③,④)})
function first(m){
return new Promise(function(resolve, reject){
$.ajax({
url: '地址',
method: 'get',
success: function(data){
if(data.status === 200){ //当该条件成立,执行后面数据请求
console.log(m+10)
resolve(m+10)
} else{ //当该条件成立,终止接下来数据请求
reject('error m')
}
}
})
})
}
first(10).then(function(m){first(m)}).catch(function(z){ //如果完成链式编程没有出错输出20、30
console.log(z) //如果first第一次执行结果为reject输出error 10
}) //如果first第二次执行结果为reject输出20、 error 20
async&await解决条件数据请求
优点
1、同步代码的写法
2、当需要多数据传参时,不易出错
function first(m){
return new Promise(function(resolve, reject){
$.ajax({
url: '地址',
method: 'get',
success: function(data){
if(data.status === 200){ //当该条件成立,执行后面数据请求
resolve(m+10)
} else{ //当该条件成立,终止接下来数据请求
reject('error m')
}
}
})
})
}
async function second(I){
var x = await first(I)
var y = await first(x)
console.log(y)
}
second(10)