打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
vue+axios自己踩过的坑

axios的介绍就不用了吧,api有具体的介绍axios或者是axios中文

主要讲的就是我自己在第一次使用axios中遇到的问题,及二次封装

先来说说二次封装,之前自己也是网上找了很多同学的封装,要么就是把post和get请求分开的,要么就是只大概写了一种的或者只是吧API又复制粘贴了的,都不太符合实际的使用,那就自己写呗

asxios的post和get一个传值是使用data,一个是使用params,我要直接调用二次封装的ajax根据不同的请求类型来使用data或者params,当初以为data和params是不能共存的,结果测试是可行的,贴代码吧


ajax: function (opt) {  var opts = opt || {};  if (!opts.url) {    alert(接口都不写,想干嘛?');    return false;  }  if (opts.type === undefined) {    opts.type = 'post'  }  axios({    method: opts.type,    url: opts.url,    // `params` 是即将与请求一起发送的 URL 参数    // 必须是一个无格式对象(plain object)或 URLSearchParams 对象    params: (opts.type === "get") ? opts.data : {},    // params:opts.data,    // `data` 是作为请求主体被发送的数据    // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'    // 在没有设置 `transformRequest` 时,必须是以下类型之一:    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams    // - 浏览器专属:FormData, File, Blob    // - Node 专属: Stream    data: (opts.type === "post") ? qs.stringify(opts.data): {},    headers: opts.headers || {      'Content-Type': 'application/x-www-form-urlencoded'    },    // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL    baseURL: '你的接口地址/',    // `transformRequest` 允许在向服务器发送前,修改请求数据(请求前处理)    // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法    // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream    transformRequest: [function (data) {      // 对 data 进行任意转换处理      return data;    }],    // `transformResponse` 在传递给 then/catch 前,允许修改响应数据(请求返回的数据)    transformResponse: [function (data) {      // 对 data 进行任意转换处理      return data;    }],    // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)    // 如果请求话费了超过 `timeout` 的时间,请求将被中断    timeout: opts.time || 10 * 1000,    //返回数据类型    responseType: opts.dataType || 'json'  }).then(function (res) {    console.log(res);    if (res.status == 200) {      if (opts.success) {        opts.success(res.data, res);      }    } else {      alert(res.data.error);    }  }).catch(function (error) {    //请求已发出,但服务器使用状态代码进行响应    //落在2xx的范围之外    console.log(error);    if (opts.error) {      opts.error(error);    } else {      //在设置触发错误的请求时发生了错误      alert('出错了');    }    console.log(error.config);  });},
然后还有个地方要注意的就是这个
  
qs.stringify(opts.data)
为什么这么干呢,就是因为,在使用post请求时如果不使用qs.stringify()转的话,后台是拿不到数据的,这也是一个坑,踩了好久;

有不对的欢迎指正


江滩股王8年追涨停铁律“1272”曝光,震惊众人 仁恒机电 · 燨燚
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
前后分离模型之封装 Api 调用
vue axios全攻略
Vue学习笔记3-ajax和jsonp
NodeJs导出Excel
vue 使用 axios 设置请求带上cookie
$.ajax,axios,fetch三种ajax请求的区别
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服