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()转的话,后台是拿不到数据的,这也是一个坑,踩了好久;
有不对的欢迎指正
有不对的欢迎指正
vue+axios自己踩过的坑的更多相关文章
- vue+node+mongoose踩过的坑
1.当你在cmd中输入npm run dev的时候,出现这种错误 很有可能是目前的端口被占用了,可以把所有可能用到这个端口号的应用关闭或者你直接改一个新的端口号 修改端口的方法:新打开一个cmd,然后 ...
- 使用vue开发项目需要注意的问题和可能踩到的坑
最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下: 一.生命钩子使用需要注意的地方 1.beforeCreat ...
- vue项目开发中踩过的坑
一.路由 这两天移动端的同事在研究vue,跟我说看着我的项目做的,子路由访问的时候是空白的,我第一反应是,不会模块没加载进来吧,还是....此处省略一千字... 废话不多说上代码 路由代码 { pat ...
- vue配置环境踩坑
Vue 环境配置踩坑 目录 Vue 环境配置踩坑 windows下cnpm -v :无法将"cnpm"项识别为 cmdlet.函数.脚本文件或可运行程序的名称. windows下c ...
- 使用pace监控ajax踩过的坑
使用vue.js开发移动端的活动页面时,有时候会出现因为请求的数据没有返回而使得当前活动页结构混乱或者不美观,这个时候可以考虑使用pace.js,通过设置参数值,在ajax全部请求结束之前显示load ...
- Dcloud开发webApp踩过的坑
Dcloud开发webApp踩过的坑 一.总结 一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系 ...
- 项目中踩过的坑之-sessionStorage
总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...
- web开发实战--弹出式富文本编辑器的实现思路和踩过的坑
前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...
- "开发路上踩过的坑要一个个填起来————持续更新······(7月30日)"
欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢 ...
随机推荐
- git第一节----git config配置
@查看git的版本 git --version @查看git配置信息 git config --list config list分全局和局部,在根目录下执行git config --list显示为全局 ...
- 一篇你看了就懂的DNS详解
DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住IP. 通过域名,最终得到该域名对应的IP地址 ...
- POJ 1002 487-3279(map映照容器的使用)
Description Businesses like to have memorable telephone numbers. One way to make a telephone number ...
- zoj 1109 Language of FatMouse(map映照容器的典型应用)
题目连接: acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1109 题目描述: We all know that FatMouse doe ...
- async和await学习笔记
结论: (1)asyc方法的返回类型必须为:void.Task或者Task<T>.返回类型为Task的异步方法中无需使用return返回值,而返回类型为Task<TResult> ...
- 月经贴:当落魄的.NET基佬遇上不可一世的JAVA派 developer
事先声明,这篇文章很没有营养,大家当笑话看就好,不要搞骂战污染博客园了谢谢. 背景: .NET(以下简称N)心里想:现在企业级应用.NET用的少,但起码.net的语法特性优美,IDE宇宙最强吧,啧啧. ...
- Elasticsearch Query DSL 整理总结(三)—— Match Phrase Query 和 Match Phrase Prefix Query
目录 引言 Match Phase Query slop 参数 analyzer 参数 zero terms query Match Phrase 前缀查询 max_expansions 小结 参考文 ...
- Android照片墙-多图加载
http://blog.csdn.net/guolin_blog/article/details/9526203 照片墙这种功能现在应该算是挺常见了,在很多应用中你都可以经常看到照片墙的身影.它的设计 ...
- Java虚拟机 - 类初始化
[深入Java虚拟机]之三:类初始化 类初始化是类加载过程的最后一个阶段,到初始化阶段,才真正开始执行类中的Java程序代码.虚拟机规范严格规定了有且只有四种情况必须立即对类进行初始化: 遇到new. ...
- BZOJ4358: permu(带撤销并查集 不删除莫队)
题意 题目链接 Sol 感觉自己已经老的爬不动了.. 想了一会儿,大概用个不删除莫队+带撤销并查集就能搞了吧,\(n \sqrt{n} logn\)应该卡的过去 不过不删除莫队咋写来着?....跑去学 ...