【JavaScript】利用Promise封装Ajax中get和post方法

Promise

ES6 原生提供了 Promise 对象。

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。

Promise 特点:
1、Promise 对象代表一个异步操作，有三种状态：

• pending: 初始状态，不是成功或失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。

2、可以进行then 的链式执行
3、区分数据请求和数据处理
4、防止回调地狱
5、调用时会传递两个参数：resolve和 reject

利用Promise，封装Ajax中get和post方法

get 方法：

// 基于promise的get请求
  fetch: function (url, query, isJson) {
    if (query) {
      url += '?'
      for (var key in query) {
        url += `${key}=${query[key]}&`
      }
      url = url.slice(0, -1)
    }
    return new Promise(function (resolve, reject) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', url)
      xhr.send()
      xhr.onreadystatechange = function () {
        // 0 - 代表未初始化。 还没有调用 open 方法
        // 1 - 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
        // 2 - 代表已加载完毕。send 已被调用。请求已经开始
        // 3 - 代表正在与服务器交互中。服务器正在解析响应内容
        // 4 - 代表完成。响应发送完毕
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var resp = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
            resolve(resp)
          } else {
            reject()
          }
        }
      }
    })
  }

post 方法：

  fetch: function(url, query, isJson) {
    var str = ''
    if (query) {
        for (var key in query) {
            str += `${key}=${query[key]}&`
        }
        str = str.slice(0, -1)
    }

    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("post", url);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(str);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var resp = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
            resolve(resp)
          } else {
            reject()
          }
        }
     }
  })
}