☆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>
