☆promise异步编排
javascript众所周知只能支持单线程,因此各种网络请求必须异步发送,导致可能会出现很多问题,比如如下我们有三个文件,现在要求进行如下请求:
① 查出当前用户信息
② 根据当前查出的用户id查出他的课程
③ 根据查出的课程id查出这门课的成绩
user.json
{
"id": 1,
"name": "zhangsan",
"password": "123123"
}
user_corse_1.json
{
"id": 10,
"name": "chinese"
}
corse_score_10.json
{
"id": 100,
"score": 90
}
这里就要注意了,如果依次写三个ajax请求,那么大概率是要出错的,这是由于三个请求是异步的,这样就不能保证第一个请求在第二三个请求之前返回结果,导致其他两个请求查询失败。
<script>
var result
$.ajax({
url: '/mock/user.json',
success(data) {
console.log('查询到用户信息:', data)
result = data
},
error(err) {
console.log(err)
}
})
$.ajax({
url: '/mock/user_corse_${result.id}.json',
success(data) {
console.log('查询到用户的课程信息:', data)
result = data
},
error(err) {
console.log(err)
}
})
$.ajax({
url: '/mock/corese_score_${result.id}.json',
success(data) {
console.log('查询到用户课程的成绩信息:', data)
},
error(err) {
console.log(err)
}
})
</script>
最直接解决的方法时通过嵌套,但是这样明显不够优雅
。
<script>
$.ajax({
url: 'mock/user.json',
success(data) {
console.log('查询到用户信息:', data)
$.ajax({
url: `mock/user_corse_${data.id}.json`,
success(data) {
console.log('查询到用户的课程信息:', data)
$.ajax({
url: `mock/corse_score_${data.id}.json`,
success(data) {
console.log('查询到用户课程的成绩信息:', data)
},
error(err) {
console.log(err)
}
})
},
error(err) {
console.log(err)
}
})
},
error(err) {
console.log(err)
}
})
</script>
这时候就轮到Es6的promise登场了,promise可以封装异步操作,让他们同步按照一定次序执行。首先创建一个promise,两个参数resolve代表成功的返回,reject代表失败的返回并终结promise链,然后不断执行p.then操作,参数为上一次resolve返回的数据。
let p = new Promise((resolve, reject) => {
// 异步操作
$.ajax({
url: 'mock/user.json',
success(data) {
console.log('查询到用户信息:', data)
resolve(data)
},
error(err) {
reject(err)
}
})
})
p.then((obj) => {
return new Promise((resolve, reject) => {
// 异步操作
$.ajax({
url: `mock/user_corse_${obj.id}.json`,
success(data) {
console.log('查询到用户的课程信息:', data)
resolve(data)
},
error(err) {
reject(err)
}
})
})
}).then((obj) => {
return new Promise((resolve, reject) => {
// 异步操作
$.ajax({
url: `mock/corse_score_${obj.id}.json`,
success(data) {
console.log('查询到用户课程的成绩信息:', data)
resolve(data)
},
error(err) {
reject(err)
}
})
})
})
更优雅一些可以对其中的重复操作进行封装,如下:
<script>
function get(url) {
return new Promise((resolve, reject) => {
$.ajax({
url,
success(data) {
resolve(data)
},
error(err) {
reject(err)
}
})
})
}
get('mock/user.json')
.then((data) => {
console.log('查询到用户信息:', data)
return get(`mock/user_corse_${data.id}.json`)
})
.then((data) => {
console.log('查询到用户的课程信息:', data)
return get(`mock/corse_score_${data.id}.json`)
})
.then(data => {
console.log('查询到用户课程的成绩信息:', data)
})
.catch(err=>{
console.log(err)
})
</script>
标签:异步,console,log,err,json,编排,promise,data,id
From: https://www.cnblogs.com/tod4/p/16597730.html