使用promise封装ajax请求

封装一个ajax请求方法:

function ajax (data) {
  return new Promise((resolve, rejects) => {
    // 创建一个XMLHttpRequest对象去发送一个请求
    const xhr = new XMLHttpRequest()
    // 判断请求类型，请求的地址就是参数传递的url
    if(data.methods==="post"){
       xhr.open(data.methods, data.url, true);
          xhr.send(JSON.stringify(data.param));
       }else{
          xhr.open(data.methods, data.url, true);
          xhr.send();
       }
     }
    // 设置返回的类型是json，是HTML5的新特性
    // 我们在请求之后拿到的是json对象，而不是字符串
    xhr.responseType = 'json'
    // html5中提供的新事件,请求完成之后（readyState为4）才会执行
    xhr.onload = () => {
      if(this.status === 200) {
        // 请求成功将请求结果返回
        resolve(this.response)
      } else {
        // 请求失败，创建一个错误对象，返回错误文本
        rejects(new Error(this.statusText))
      }
    }
    // 开始执行异步请求
    xhr.send()
  })
}

调用ajax方法,发送请求

let data = {
  url: '', //请求地址
  methods: 'post',
  param: formData,
}
let p = ajax(data)
p.then(
  (res) => {
    //请求成功
    res.data.forEach((val, index) => {
      cent.innerHTML += `<span id='' class='zxz-portry_content_span'>${val}</span>`
    })
  },
  (reason) => {
    //请求失败
    alert(reason.msg)
  }
)