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()转的话,后台是拿不到数据的,这也是一个坑,踩了好久;

有不对的欢迎指正

有不对的欢迎指正

vue+axios自己踩过的坑的更多相关文章

  1. vue+node+mongoose踩过的坑

    1.当你在cmd中输入npm run dev的时候,出现这种错误 很有可能是目前的端口被占用了,可以把所有可能用到这个端口号的应用关闭或者你直接改一个新的端口号 修改端口的方法:新打开一个cmd,然后 ...

  2. 使用vue开发项目需要注意的问题和可能踩到的坑

    最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下: 一.生命钩子使用需要注意的地方 1.beforeCreat ...

  3. vue项目开发中踩过的坑

    一.路由 这两天移动端的同事在研究vue,跟我说看着我的项目做的,子路由访问的时候是空白的,我第一反应是,不会模块没加载进来吧,还是....此处省略一千字... 废话不多说上代码 路由代码 { pat ...

  4. vue配置环境踩坑

    Vue 环境配置踩坑 目录 Vue 环境配置踩坑 windows下cnpm -v :无法将"cnpm"项识别为 cmdlet.函数.脚本文件或可运行程序的名称. windows下c ...

  5. 使用pace监控ajax踩过的坑

    使用vue.js开发移动端的活动页面时,有时候会出现因为请求的数据没有返回而使得当前活动页结构混乱或者不美观,这个时候可以考虑使用pace.js,通过设置参数值,在ajax全部请求结束之前显示load ...

  6. Dcloud开发webApp踩过的坑

    Dcloud开发webApp踩过的坑 一.总结 一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系 ...

  7. 项目中踩过的坑之-sessionStorage

    总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...

  8. web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

    前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...

  9. "开发路上踩过的坑要一个个填起来————持续更新······(7月30日)"

    欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢 ...

随机推荐

  1. 一篇你看了就懂的DNS详解

    DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住IP. 通过域名,最终得到该域名对应的IP地址 ...

  2. 分布式理论(一) —— CAP 定理

    目录: 什么是 CAP 定理 为什么只能 3 选 2 能不能解决 3 选 2 的问题 引用 1. 什么是 CAP 定理 2000 年的时候,Eric Brewer 教授提出了 CAP 猜想,2年后,被 ...

  3. EWS 通过SubscribeToPullNotifications订阅Exchange删除邮件

    摘要 在使用拉通知的方式监听exchange邮件的时候,无法监听到收件箱删除的邮件.最后通过调试发现,在删除收件箱邮件的时候,是将收件箱的邮件移动到了deleted item文件夹,会触发Moved事 ...

  4. $.each()和$(selector).each()

    转载:http://www.jb51.net/article/65215.htm $.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的 ...

  5. Flask如何给多个视图函数增加装饰器

    这几天在学习Flask, 遇到了些小问题,比如说怎么给多个视图函数加相同的装饰器 给单独一个视图函数加装饰器的话很简单,写一个装饰器,然后直接加在原装饰器下面即可,多个的话,会报这样一个错误: 这个异 ...

  6. 在vue项目中,通过v-for循环,动态添加后台返回的事件

    一.现有一种业务需求,前端的某个元素添加点击事件,但事件是后台返回的(不确定),需要动态添加,下面是具体思路: .假定后台返回数据为如下格式: list: [ { name: '李寻欢', kungF ...

  7. ConcurrentDictionary的用法

    private static ConcurrentDictionary<Guid, string> dictDbNames = new ConcurrentDictionary<Gu ...

  8. Lambda表达式 For Android

    Lambda简介 A lambda expression is a block of code with parameters. lambda表达式是带参数的代码块. 虽然看着很先进,其实Lambda ...

  9. 单元测试(四)-隔离框架NSubstitute

    之前学习了单元测试的基础知识,以及桩对象和模拟对象的不同作用.但在实际应用中,往往不会直接手写桩对象或者模拟对象,而是使用隔离框架动态的创建这些对象,这可以让测试变得更简便.快捷,还可以更好地应对复杂 ...

  10. Android长按事件和点击事件 冲突问题

    长按点击的时候默认会触发点击事件,android系统是优先点击的,并且没有返回值:而长按事件是有返回值的,如果返回false,两个事件都会有响应,如果返回true则只响应长按事件.