首页 前端知识 基于jQuery的ajax的封装

基于jQuery的ajax的封装

2024-06-22 01:06:31 前端知识 前端哥 770 260 我要收藏

在项目中,特别是没有用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) { 
           //给用户提示登录超时,您需要重新登录 并返回登录页面,清
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13213.html
标签
评论
发布的文章

jQuery 选择器

2024-05-12 00:05:34

Vue中public/assets目录区别

2024-07-02 23:07:29

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!