使用原生 JS 和 jQuery 封装网络请求比较

发布于 2021-12-03 22:00:49 字数 3015 浏览 1356 评论 0

JS 实现

基于普通的 JS 进行封装

export default {
  host: '',
  postJson(url, data, callback) {
    return this.ajax(url, {method: "POST", data}, callback);
  },
  get(url, callback) {
    return this.ajax(url, {method: "GET"}, callback)  
  },
  ajax(url, param, callback) {
    url = this.host + url;
    var xhr = createXHR();
    xhr.onreadystatechange = function() {
      if (xhr.readyState==4)  {
        let resp = JSON.parse(xhr.responseText);
        if(xhr.status==200) {
          if(resp.code == 1) {
            callback(resp);
          } else {
            tip((resp.body && resp.body.msg) || "未知错误")
          }
        } else  {
           // 401 404 500 503 others
          tip("未知错误");
        }
      }
    };
    xhr.open(param.method, url, true);

    if(param.method === 'POST') {
      xhr.setRequestHeader("Content-Type", "application/json");
    }
    xhr.send(JSON.stringify(param.data) || null);
  }
}

response 的一个成功示例

status: 200,
statusText: "OK",
response: "{"code":1,"body":[]}",
responseText: "{"code":1,"body":[]}"

response 的两个失败示例

status: 404,
statusText: "Not Found",
response: "<!DOCTYPE html>",
responseText: "<!DOCTYPE html>",

status: 404,
statusText: "error",
responseText: "{"timestamp":1556440601945,"status":404,"error":"Not Found","message":"No message available","path":"/api/v1/app/login/detail2"}",
responseJson: {"timestamp":1556440601945,"status":404,"error":"Not Found","message":"No message available","path":"/api/v1/app/login/detail2"}

判定成功失败使用主要使用 status，具体的数据来自于 response/responseText/responseJSON/responseHTML。

jQuery 实现


ajax(method, url, data) {
    let token = Utils.getCookie('token');
    let param = { 
      url, 
      type: method, 
      headers: { token }
    };
    if((method == 'post' || method == 'put') && data) {
      param.contentType = 'application/json';
      param.data = JSON.stringify(data);
    } 
    return $.ajax(param).always(function(data, msg, resp){
      if(resp.status == 200) {
        if(data.status == 10101) {
          Tip.message(data.message || '未授权用户，即将跳转到登陆界面');
          setTimeout(() => { window.location.href = '/login.html'; }, 2000);
        } else if(data.status == 404) {
          Tip.message(data.message || '请求找不到');
        } else if(data.status == 500 || data.status == 503) {
          Tip.message(data.message || '服务器错误');
        }
      } 
      else {
        Tip.message(resp.statusText || '系统异常');
      }
    });
  }

在 jQuery 中，类似于 alawys/fail/success 的方法为我们提供了一些快捷入口，即：

success 只有 status==200 才会进入
fail 只有 status != 200 才会进入
always 则无论如何都会进入

在 always 和 success 中（或 then 的第一个函数），通过 data 拿到的其实是用 responseText 转过的对象结构，在 fail 中的 resp 则是原始的 httpResponse 的对象，相当于 jQuery 提供了一些封装，可以更直观地拿到所需要的数据对象或原始对对象。

分享到QQ

分享到微博