Vue中简单封装ajax请求

最新推荐文章于 2024-09-20 16:29:25 发布

原创最新推荐文章于 2024-09-20 16:29:25 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

在时间紧迫的项目中，为减少重复代码，作者将ajax请求进行了简单封装。封装后的请求代码更加清爽，直接放置在main.js中，也可以选择放入新建的js文件并引入。尽管Vue中通常使用axios，但因为配置原因，此次项目选择了ajax，并表示未来会尝试配置axios。

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

这次用的又是别人搭建好的项目, 然后项目又开始很赶,上级催催催,心里可咬牙切齿了呢. 然后我就开始闷头死敲代码…
的项目, 然后项目又开始很赶,上级催催催,心里可咬牙切齿了呢. 然后我就开始闷头死敲代码… 这次别人用的依旧是ajax请求…
你们看一个页面肯定不止一个请求对吧, 多写几个就很冗余了

			$.ajax({
                    headers: {
                        "programId":"manager"//此处放置请求到的用户token
                    },
                    async : false,
                    type : "POST",
                    contentType : 'application/json',
                    dataType : 'json',
                    data :JSON.stringify(data),
                    //我的api是配好的,请忽略
                    url: "api/manager/user/getUsers",
                    success: function(res) {
                        console.log('列表',res)
                        if(res.code==0){
                            var data=[];
                            var list = res.data.list;
                            for(var i=0;i<list.length;i++){
                                data.push(list[i]);
                            }
                        }
                    }
                })

然后我就把它简单封装起来了, 我直接放在main.js中的,(如果想让main.js清爽点,可以把它放在新建的js里面,然后引入),看下面:

//封装的ajax
Vue.prototype.ajax = function(path, data, type,fnSuccess){
  if (type != "POST") {
      type = "GET";
  }
  var _data = data;
  var baseUrl = '项目接口地址'
  $.ajax({
      url: baseUrl+path,
      data: data,
      type: type,
      contentType : 'application/json',
      dataType : 'json',
      //headers可以不用放里面的,你的ajax请求需要什么你就应该放到对应的位置
      headers: {
          "programId":"manager"//此处放置请求到的用户token
      },
      success: function (res) {
      	//可以console.log(res) 看下你的结果
          if (!fnSuccess) return false;
          if (res) {
              fnSuccess(res);
          }
      },
      error: function (e) {
          console.log('错误码:'+e.status+';'+'错误信息:'+e.statusText);
      },
      async : false,
  });
};

这样看清爽多了, 接着页面this.ajax调用

this.ajax('/manager/user/getUsers',JSON.stringify(data),"POST",function(res){
       console.log('封装的ajax请求',res)
 })

为啥vue不用axios呢?因为我也懒… 看别人那样配置的,我就没再用axios了,下次争取时间配置axios!!