辉太郎看前端(promise封装ajax)

前言

对于前端人员而言，ajax是必会的，可是又有多少人能够，自己封装ajax呢？接下来就让我们一起去探索吧！

封装原生ajax

         //定义构造函数，第一参数为请求方式，第二参数为请求地址
  function packaGing(method,url) {
            // 创建promise实例
      let p = new Promise((resolve, reject) => {
           let xhq = new XMLHttpRequest()  //创建ajax核心对象
           xhq.open(method, url, true)     //开启请求
           xhq.send()  //发送
           //异步回调函数
           xhq.onreadystatechange = function () {
           //判断执行到第四步，并且状态码为200时返回成功数据
              if (xhq.readyState == 4 && xhq.status == 200) {
                  resolve(xhq.responseText)
                  //判断状态码为400，返回错误信息
               } else if (xhq.status == 400) { 
                   reject("失败")
                    }
             }
        })
            return p   //返回Promise实例
   }
   //接口地址
   let url ="实例化接口地址"
   packaGing("传入请求方式", url).then((res) => {
        console.log(res)
     }, (err) => {
       console.log(err)
   })

注：

1. .then()中有两个回调，第一个捕捉成功信息，第二个捕捉失败信息。
2. Promise中也有两个参数都是回调函数，第一个捕捉成功信息，第二个捕捉失败信息。

总结

初出茅庐，多多关照。