promise--异步编程的一种解决方案

promise–异步编程的一种解决方案

promise是异步编程的一种解决方案，是一种让异步请求更规范可见的工具，可以对异步请求成功和失败的参数分别进行接收，并且继续执行。

我们拿json充当数据。

mock文件夹下有以下三个json文件

corse_score_10.json 得分

{
    "id": 100,
    "score": 90
}

user.json 用户
{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}


user_corse_1.json 课程
{
    "id": 10,
    "name": "chinese"
}

我们想实现如下需求

  
//1、查出当前用户信息
        //2、按照当前用户的id查出他的课程
        //3、按照当前课程id查出分数

如果不用promise，我们使用ajax的话。

     $.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(error) {
                                console.log("出现异常了：" + error);
                             }
                         });
                    },
                     error(error) {
                         console.log("出现异常了：" + error);
                     }
                 });
             },
             error(error) {
               console.log("出现异常了：" + error);
             }
         });

十分的混乱，可读性很差。

使用Promise：

我们先来简单了解下promise

let p = new Promise((resolve, reject) => { //传入成功解析，失败拒绝
             //1、异步操作
             $.ajax({
                 url: "mock/user.json",
                 success: function (data) {
                     console.log("查询用户成功:", data)
                     resolve(data);
                 },
                 error: function (err) {
                     reject(err);
                 }
             });
         });

上述代码，我们创建了一个Promise对象，用它的构造函数包含了一个ajax异步请求，并且用resolve(data)来接收成功后的数据，用reject(err)来接受失败的数据。

之后我们可以用then再次处理这些数据。

         p.then((obj) => { //成功以后做什么
             return new Promise((resolve, reject) => {
                 $.ajax({
                     url: `mock/user_corse_${obj.id}.json`,
                     success: function (data) {
                         console.log("查询用户课程成功:", data)
                         resolve(data);
                     },
                     error: function (err) {
                         reject(err)
                     }
                 });
             })
             
         }).then((data) => { //成功以后干什么,也可以把这里的换成catch（）判断失败了干什么
             console.log("上一步的结果", data)
             $.ajax({
                 url: `mock/corse_score_${data.id}.json`,
                 success: function (data) {
                     console.log("查询课程得分成功:", data)
                 },
                error: function (err) {
                 }
             });
         })

我们写一个函数把刚才的问题简化下

        function get(url, data) { //自己定义一个方法整合一下
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (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)=>{ //失败的话catch
                console.log("出现异常",err)
            });