[http] promise

[Alice52]

需求: 查出当前用户信息 + 按照当前用户的 id 查出他的课程 + 按照当前课程 id 查出分数

1. origin

   $.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);
    },
   });

2. 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);
      },
    });
   });
   
   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) => {
    console.log('上一步的结果', data);
    $.ajax({
      url: `mock/corse_score_${data.id}.json`,
      success: function (data) {
        console.log('查询课程得分成功:', data);
      },
      error: function (err) {},
    });
   });

3. Promise 封装方法

   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) => {
      console.log('出现异常', err);
    });