1.promise和ajax的封装

一、promise的使用
在JavaScript的世界中，所有的代码都是单线程执行的。由于这个"缺陷"，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。

promise使ES6中引入的一个异步编程解决方案，与传统的ES5方法相比它的结构更合理，功能更强大.

特点:

promise对象代表一个异步操作，有三种状态: pending (进行中)、fulfilled (已成功)和rejected (已失败)。只有异步操作的结果，可以决定当前是哪一种状态，热河其他操作都无法改变这个状态。

使用promise封装ajax:

class axios {
  static get (param = {}) {
    // console.log(param);
    param.method = 'get'
    return axios.http(param)
  }
  static post (param = {}) {
    param.method = 'post'
    return axios.http(param)
  }
  static http (param) {
    // console.log(param);
    let { method, url, data, dataType = 'json' } = param;
    //1 判断url是否为空
    if (!url) {
      throw new Error('判断不能为空')
    }
    // 2 处理data
    let tmPparam = null;
    if (data) {
      // console.log(data);
      tmPparam = [];
      for (let attr in data) {
        // console.log(attr);
        // 以key=val的形式添加到数组中
        tmPparam.push(`${attr}=${data[attr]}`)

      }

      // 3 以&分割为字符串
      tmPparam = tmPparam.join('&');
      // console.log(tmPparam);
      // 4 get 请求则拼接参数到url上
      if (method == 'get') {
        url = url + '?' + tmPparam;
        tmPparam = null;
      }
    }
    return new Promise((resolve, reject) => {
      // ajax的实现
      let xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
      xhr.send(tmPparam);
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            let res = xhr.response;
            if (dataType == 'json') {
              res = JSON.parse(res)

            }
            // 成功
            resolve(res)
          } else {
            reject(xhr.status)
          }
        }
      }
    })
  }
}