基于jQuery的ajax的封装

最新推荐文章于 2023-11-24 19:53:18 发布

奶香起司猫

最新推荐文章于 2023-11-24 19:53:18 发布

阅读量1.6k

点赞数 1

文章标签： jquery ajax 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45806058/article/details/132492515

版权

本文介绍了如何在不使用前端框架如Vue的情况下，利用jQuery的ajax进行请求的封装，包括get、post、put和delete四种请求方式。通过封装成公共方法funAjax，减少代码重复，提高效率。每个请求的封装都基于Promise对象处理返回数据，便于异步操作。在实际应用中，只需导入funAjax.js文件并调用相应方法即可进行HTTP操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中，特别是没有用vue或是一些其他的大型前端框架时，发请求一般采用jQuery提供的ajax方法，请求很多时，就需要将ajax封装为一个公共方法用来减少代码冗余，这里使用promise对象来处理返回数据。

1、get请求的封装

其实几个请求的封装大同小异，get请求会详细作为例子详细描述。

var baseUrl = "基地址"; //用于拼接之后请求的url
//全局公共请求方法
var funAjax = {
  get: (url, async, data, method = "get") => {
    return new Promise((resolve, reject) => {
      // 这里可以使用一些小的插件来显示正在请求
      // 加载中动画开启
      //设置默认异步请求 
      /*此处同步请求： 同步请求（Synchronous Request）：在发送请求时，JavaScript 引擎会等待请求完成并且收到响应，然后才会继续执行后续的代码。执行阶段会被阻塞，直到接收到请求的结果。这意味着，同步请求会阻塞后续的代码执行，直到请求完成，页面可能会出现“假死”状态。同步请求不适用于长时间的操作，因为它会冻结页面并阻塞用户的交互，异步请求则不用等待返回结果，根据情况设置参数
*/
      if (async == "" || async == null || typeof async == "undefined") {
        async = true;
      }
      $.ajax({
        url: baseUrl + url,
        type: method,
        async: async,
        dataType: "json",
        data: JSON.stringify(data),
        headers: {
          Token: localStorage.getItem("token"), //自定义请求头 此处我的token配置自动获取。根据自己配置位置进行获取
          "Content-Type": "application/json;charset=utf8",
        },
        success: function (ret) {
          // 加载中动画关闭
          // loading && loading.close();
          if (ret.code == 200) {
            resolve(ret);
          } else {
            if (ret.code == 401) { 
           //给用户提示登录超时，您需要重新登录 并返回登录页面，清空请求头
              setTimeout(() => {
                localStorage.setItem("token", null);
                window.open("login.html");
              }, 1500);
            }
            reject(ret);
          }
        },
        error: function (err) {
          //console.log(JSON.stringify(err));
          // 加载中动画关闭
          // statusCode--->网络请求状态码，数字类型
          // code--->错误码，数字类型。（0：连接错误、1：超时、2：授权错误、3：数据类型错误、4：不安全的数据） 可以自己根据后端的返回数据来编写对应错误的提示
          if (err.statusCode == 1) {
           //提示用户请求超时，请稍后再试
          }
          reject(err);
        },
      });
    });
  },

get方法的使用

 //发起get请求示例：
      funAjax.get(`url`，true,'').then((res) => {
          //请求成功
          if (res.code == 200) {
            //状态码为200，处理返回的数据，返回的数据
          }
      }).catch((err) => {
          //错误处理 错误信息在err中
      });

2、post请求的封装

post: (url, async, data, method = "post") => {
    return new Promise((resolve, reject) => {
      // 加载中动画开启
      //设置默认异步请求
      if (async == "" || async == null || typeof async == "undefined") {
        async = true;
      }
      $.ajax({
        url: baseUrl + url,
        type: method,
        async: async,
        dataType: "json",
        data: JSON.stringify(data),
        headers: {
          Token: localStorage.getItem("token"), //自定义请求头
          "Content-Type": "application/json;charset=utf8",
        },
        success: function (ret) {
          // 加载中动画关闭
          if (ret.code == 200) {
            resolve(ret);
          } else {
            if (ret.code == 401) {
        //登录超时，您需要重新登录
              setTimeout(() => {
                localStorage.setItem("token", null);
                window.open("login.html");
              }, 1500);
            }
            reject(ret);
          }
        },
        error: function (err) {
          //console.log(JSON.stringify(err));
          // 加载中动画关闭
          // statusCode--->网络请求状态码，数字类型
          // code--->错误码，数字类型。（0：连接错误、1：超时、2：授权错误、3：数据类型错误、4：不安全的数据）
          if (err.statusCode == 1) {
          //请求超时，请稍后再试
          }
          reject(err);
        },
      });
    });
  },

post的使用通get请求相同

//发起post请求示例：
      funAjax.post(`url`，true,data).then((res) => {
          //请求成功
          if (res.code == 200) {
            //状态码为200，处理返回的数据，返回的数据
          }
      }).catch((err) => {
          //错误处理 错误信息在err中
      });

3、put请求的封装

put: (url, async, data, method = "put") => {
    return new Promise((resolve, reject) => {
      // 加载中动画开启
      //设置默认异步请求
      if (async == "" || async == null || typeof async == "undefined") {
        async = true;
      }
      $.ajax({
        url: baseUrl + url,
        type: method,
        async: async,
        dataType: "json",
        data: JSON.stringify(data),
        headers: {
          Token: localStorage.getItem("token"), //自定义请求头
          "Content-Type": "application/json;charset=utf8",
        },
        success: function (ret) {
          // 加载中动画关闭
          // loading && loading.close();
          if (ret.code == 200) {
            resolve(ret);
          } else {
            if (ret.code == 401) {
          //登录超时，您需要重新登录
              setTimeout(() => {
                localStorage.setItem("token", null);
                window.open("login.html");
              }, 1500);
            }
            reject(ret);
          }
        },
        error: function (err) {
          //console.log(JSON.stringify(err));
          // 加载中动画关闭
          // statusCode--->网络请求状态码，数字类型
          // code--->错误码，数字类型。（0：连接错误、1：超时、2：授权错误、3：数据类型错误、4：不安全的数据）
          if (err.statusCode == 1) {
          //  请求超时，请稍后再试
          }
          reject(err);
        },
      });
    });
  },

put请求与post请求相同用法，此处不再做示例

4、delete请求的封装

delete: (url, async, data, method = "delete") => {
    return new Promise((resolve, reject) => {
      // 加载中动画开启
      //设置默认异步请求
      if (async == "" || async == null || typeof async == "undefined") {
        async = true;
      }
      $.ajax({
        url: baseUrl + url,
        type: method,
        async: async,
        dataType: "json",
        data: JSON.stringify(data),
        headers: {
          Token: localStorage.getItem("token"), //自定义请求头
          "Content-Type": "application/json;charset=utf8",
        },
        success: function (ret) {
          // 加载中动画关闭
          // loading && loading.close();
          if (ret.code == 200) {
            resolve(ret);
          } else {
            if (ret.code == 401) {
          //登录超时，您需要重新登录。
          setTimeout(() => {
                localStorage.setItem("token", null);
                window.open("../../authentication-login.html");
              }, 1500);
            }
            reject(ret);
          }
        },
        error: function (err) {
          //console.log(JSON.stringify(err));
          // 加载中动画关闭
          // statusCode--->网络请求状态码，数字类型
          // code--->错误码，数字类型。（0：连接错误、1：超时、2：授权错误、3：数据类型错误、4：不安全的数据）
          if (err.statusCode == 1) {
            //请求超时，请稍后再试。
          }
          reject(err);
        },
      });
    });
  },
};

delete请求示例也不再做过多赘述。