面向对象封装Ajax

class MyAjax {
  constructor(ajaxInit) {
    //1、定义ajax默认值
    let ajax = {
      url: '',
      type: "get",
      data: {},
      dataType: 'json',
      success: () => { },
      error: () => { }
    }
    this.ajaxInit = ajaxInit;
    // 2、将默认值和传进来的对象数据合并
    Object.assign(ajax, this.ajaxInit)
    // 3、将type和dataType都转换为小写，方便后面字符串判断
    ajax.type = ajax.type.toLocaleLowerCase()
    ajax.dataType = ajax.dataType.toLocaleLowerCase()
    // 4、调用发送方法，将对象传进去
    this.send(ajax)
  }

  send(ajax) {
    let xhr = new XMLHttpRequest()
    // 5、如果是put和post走这边
    if (ajax.type == 'put' || ajax.type == 'post') {
      xhr.open(ajax.type, ajax.url);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      // 6、调用方法，将需要传的值转换为Urlencode格式的字符串
      xhr.send(this.getUrlencoded(ajax.data))
    // 5、如果是get和delete走这边,其他的请求还未定义
    } else if (ajax.type == 'get' || ajax.type == 'delete') {
      // 6、在url后面拼接上urlencode格式的数据
      xhr.open(ajax.type, ajax.url + `?${this.getUrlencoded(ajax.data)}`);
      xhr.send()
    }
    xhr.onreadystatechange = function () {
      if (this.status == 200 && this.readyState == 4) {
        // 7、根据指定的返回类型返回数据，并调用成功的方法
        switch (ajax.dataType) {
          case 'json': ajax.success(JSON.parse(this.responseText)); break;
          case 'text':
          default: ajax.success(this.responseText); break;
        }
        // 8、若遇到错误，调用失败的方法
      } else if (this.status !== 200 && this.readyState == 4) {
        ajax.error(this.responseText)
      }
    }
  }

  getUrlencoded(data) {
    if((typeof data)!=='object')return data
    let str = ``
    for (let key in data) {
      str += `${key}=${data[key]}&`
    }
    return str.slice(0, -1)
  }
}

//实例化对象，并传入对象
new MyAjax({
  url: './api/getbooks',
  success: function (res) {
    console.log(res)
  },
  error: (res) => {
    console.log(res)
  }
})