前端练习：用面向对象封装AJAX（用promise和用普通回调函数两种方法）

Posted 2021-06-19 我是真的不会前端

普通回调函数写法

首先不用promise方法。设置的参数cb是当前请求参数的回调函数。
封装的特性：1 提取参数,进行传递
2 找到get和post异同点
一样的地方公用 不一样的区别处理

    class axios {

      static get(url, data, cb) {
        axios.http('get', url, data, cb);   //这里使用静态方法
      }
      static post(url, data, cb) {
        axios.http('post', url, data, cb) 
      }
      static http(type, url, data, cb) {
        // 参数样式   name=zs&age=18
        let param = '';
        for (let attr in data) {
          //console.log(attr, data[attr]);
          param += attr + '=' + data[attr] + '&'
        }
        param = param.slice(0, param.length - 1);
        // return;
        let xhr = new XMLHttpRequest();
        // 设置请求
        url = type == 'get' ? url + '?' + param : url;

        xhr.open(type, url);
        // 设置请求头
        type == 'post' && xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

        // 发送请求
        xhr.send(type == 'post' && param);

        // 监听请求
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
            //  console.log(xhr.response);
            cb(xhr.response);
          }
        }
      }
    }

    // axios.get('./XXX.php', {
    //   name: 'zs',
    //   age: 18
    // }, (res) => {
    //   console.log(res);

    // })

    // axios.post('./XXX.php', {
    //   name: 'zs',
    //   age: 18
    // }, (res) => {
    //   console.log(res);

这次用promise进行改写

首先得了解promise的用法和实用意义：

对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：
1.pending: 初始状态，不是成功或失败状态。
2.fulfilled: 意味着操作成功完成。
3.rejected: 意味着操作失败。
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易

class axios {

      static get(url, data, cb) {
        return axios.http('get', url, data, cb);
      }
      static post(url, data, cb) {
        return axios.http('post', url, data, cb)
      }
      static http(type, url, data, cb) {
        return new Promise(function (resolve, reject) {
          // 参数样式   name=zs&age=18
          let param = '';
          for (let attr in data) {
            param += attr + '=' + data[attr] + '&'
          }
          param = param.slice(0, param.length - 1);
          // return;
          let xhr = new XMLHttpRequest();
          url = type == 'get' ? url + '?' + param : url;


          xhr.open(type, url);
          // 设置请求头
          type == 'post' && xhr.setRequestHeader
          ('content-type', 'application/x-www-form-urlencoded')

          // 发送请求
          xhr.send(type == 'post' && param);

          // 监听请求
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
              if (xhr.status == 200)
                resolve(xhr.response)
              else
                reject('error')
            }
          }
        })

      }
    }

    axios.get('./XXX.php', {
      name: 'zs',
      age: 18
    }).then(res => {
      console.log(res);

    }).catch(res => {
      console.log(res);

    })