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

待我称王封你为后i 2023-07-22 10:27 3阅读 0赞

#### 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()
              }
            }
         }
      })
    }