【前端基础】（二）promise异步编排

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