正文
promise处理回调地狱
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
promise
异步调用
异步结果分析
-
定时任务
-
ajax
-
自定义事件函数
多次异步调用依赖分析（promise 应用场景）
-
多次异步调用结果顺序不确定问题
$.ajax({
url: 'http:localhost:3000/data1',
success: data => {
console.log(data)
}
})
$.ajax({
url: 'http:localhost:3000/data2',
success: data => {
setTimeout(()=>{
console.log(data)
},2000)
}
})
$.ajax({
url: 'http:localhost:3000/data3',
success: data => {
console.log(data)
}
})
输出结果111，333，三秒之后出现 222
-
异步调用结果存在依赖需要嵌套，造成回调地狱问题
$.ajax({
url: 'http:localhost:3000/data1',
success: data => {
console.log(data)
$.ajax({
url: 'http:localhost:3000/data2',
success: data => {
setTimeout(() => {
console.log(data)
$.ajax({
url: 'http:localhost:3000/data3',
success: data => {
setTimeout(()=>{
console.log(data)
//...
},1000)
}
})
}, 1000)
}
})
}
})
此时解决了顺序问题，但是形成了回调地狱，输出结果 111，222（1s），333（1s）
使用promise的主要好处
-
可以避免多层异步嵌套问题（回调地狱）
-
promise 提供了简洁的api,使得控制异步操作更加容易
简单的异步任务
new Promise((resolve, reject) => {
//实现异步任务
setTimeout(() => {
let flag = false //true,输出 Hello，false,输出 error
if (flag) return resolve('hello')
reject('error')
}, 1000)
})
.then(data => {
//接收异步任务的成功(resolve)结果
console.log(data)
}, info => {
//接收异步任务的失败(reject)结果
console.log(info)
})
异步结果分析
-
定时任务
-
ajax
-
自定义事件函数
多次异步调用依赖分析（promise 应用场景）
-
多次异步调用结果顺序不确定问题
$.ajax({
url: 'http:localhost:3000/data1',
success: data => {
console.log(data)
}
})
$.ajax({
url: 'http:localhost:3000/data2',
success: data => {
setTimeout(()=>{
console.log(data)
},2000)
}
})
$.ajax({
url: 'http:localhost:3000/data3',
success: data => {
console.log(data)
}
})输出结果111，333，三秒之后出现 222
-
异步调用结果存在依赖需要嵌套，造成回调地狱问题
$.ajax({
url: 'http:localhost:3000/data1',
success: data => {
console.log(data)
$.ajax({
url: 'http:localhost:3000/data2',
success: data => {
setTimeout(() => {
console.log(data)
$.ajax({
url: 'http:localhost:3000/data3',
success: data => {
setTimeout(()=>{
console.log(data)
//...
},1000)
}
})
}, 1000)
}
})
}
})此时解决了顺序问题，但是形成了回调地狱，输出结果 111，222（1s），333（1s）
使用promise的主要好处
-
可以避免多层异步嵌套问题（回调地狱）
-
promise 提供了简洁的api,使得控制异步操作更加容易
简单的异步任务
new Promise((resolve, reject) => {
//实现异步任务
setTimeout(() => {
let flag = false //true,输出 Hello，false,输出 error
if (flag) return resolve('hello')
reject('error')
}, 1000)
})
.then(data => {
//接收异步任务的成功(resolve)结果
console.log(data)
}, info => {
//接收异步任务的失败(reject)结果
console.log(info)
})
可以避免多层异步嵌套问题（回调地狱）
promise 提供了简洁的api,使得控制异步操作更加容易
new Promise((resolve, reject) => {
//实现异步任务
setTimeout(() => {
let flag = false //true,输出 Hello，false,输出 error
if (flag) return resolve('hello')
reject('error')
}, 1000)
})
.then(data => {
//接收异步任务的成功(resolve)结果
console.log(data)
}, info => {
//接收异步任务的失败(reject)结果
console.log(info)
})
promise处理原生ajax请求（单个）
<script>
function queryData(url) {
let p = new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState != 4) return
if (xhr.readyState = 4 && xhr.status == 200) {
resolve(xhr.responseText)
} else {
reject('server error')
}
}
xhr.open('get', url);
xhr.send(null);
})
return p
}
queryData('http:localhost:3000/data') //当前接口中没有 data 这个接口，输出 server error
.then((data)=>{
//接收resolve的结果
console.log(data)
},(err)=>{
//接收reject的结果
console.log(err)
})
</script>
请求失败：
请求成功：
promise处理多个 ajax 请求
<script>
//promise处理原生ajax请求
function queryData(url) {
let p = new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState != 4) return
if (xhr.readyState = 4 && xhr.status == 200) {
resolve(xhr.responseText)
} else {
reject('server error')
}
}
xhr.open('get', url)
xhr.send(null)
})
return p
}
queryData('http://localhost:3000/data') //返回了一个新的promise对象 p1
.then((data) => { //相当于 p1.then
console.log(data)
return queryData('http://localhost:3000/data2') //返回了一个新的promise对象 p2
}, (err) => {
return 'error1'
})
.then((data) => { //相当于 p2.then
console.log(data)
return queryData('http://localhost:3000/data3') //返回一个新的promise对象 p3
}, (err) => {
return 'error2'
})
.then((data) => { //相当于 p3.then
console.log(data)
}, (err) => {
return 'error3'
})
</script>
结果：
结果分析：
