promise处理回调地狱
2024-09-03 03:30:56
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)
})
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>
结果：
结果分析：
最新文章
- vm.max_map_count
- maven之上传新的jar包
- JSON解析方案
- Android中获取IMSI和IMEI
- 【linux命令系列】熟练运用每一个光标移动到最前和最后
- GIT学习（二）
- 【整理】Ajax异步实现的几种方式总结
- Eclipse中Lombok的安装和注解说明
- NLP一些工程应用模型
- eclipse中启动服务时提示端口被占的2种解决方案
- 何为cookie?
- iOS动画的逻辑结构：动画的定义--动画是采用连续播放静止图像的方法产生物体运动的效果。
- Docker学习笔记二：Docker常用命令及提升拉取镜像的速度
- RHCE7 学习里程-1.配置IP,DNS
- 鼠标事件-拖拽（不能拖出窗口的div）
- yum -y install 和yum install 的区别
- AC自动机专题总结
- mysql字符串拼接，存储过程
- Gitlab安装部署及基础操作
- VBA Collection用法总结