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 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢 ...
随机推荐
- [转]Magento Configurable Product
本文转自:https://docs.magento.com/m1/ce/user_guide/catalog/product-configurable.html A configurable prod ...
- MVC应用程序,动态创建单选列表(RadioButtonList)
单选列表是多个选项,让用户选择一个.MVC应用程序开发中,少之不了.下面就来练习之个小功能. 这个练习,Insus.NET想实现一个日期显示的格式.在MVC中,得需从model开始创建: 再创建一个E ...
- WebFrom与MVC异同
一.共同点 它们共用一套管道机制. 二.不同点: 1.开发方式: webform开发方式 第一步:前台页面(*.aspx)+后置代码类(*.cs) 第二步:前台页面(*.aspx)+一般处理程序(*h ...
- 如何监听对 HIVE 元数据的操作
目录 简介 HIVE 基本操作 获取 HIVE 源码 编译 HIVE 源码 启动 HIVE 停止 HIVE 监听对 HIVE 元数据的操作 参考文档 简介 公司有个元数据管理平台,会定期同步 HIVE ...
- Unix环境高级编程:文件 IO 原子性 与 状态 共享
参考 UnixUnix环境高级编程 第三章 文件IO 偏移共享 单进程单文件描述符 在只有一个进程时,打开一个文件,对该文件描述符进行写入操作后,后续的写入操作会在原来偏移的基础上进行,这样就可以实现 ...
- 使用PHPExcel实现数据批量导入到数据库
此例子只使用execel2003的.xls文档,若使用的是其他版本,可以保存格式为“Execel 97-2003 工作簿(*.xls)”即.xls文件类型即可! 功能说明:只能上传Excel2003类 ...
- 【CDQ分治】[HNOI2010]城市建设
题目链接 线段树分治+LCT只有80 然后就有了CDQ分治的做法 把不可能在生成树里的扔到后面 把一定在生成树里的扔到并查集里存起来 分治到l=r,修改边权,跑个kruskal就行了 由于要支持撤销, ...
- Maven学习(二)使用命令创建maven项目
创建maven项目 手动 严格参照约定目录结构,我们开始手动新增文件夹 命令方式 project项目 我们也可以使用maven自动生成目录: mvn archetype:generate -Dgrou ...
- 【element】改变el-table样式,实现全局滚动,固定表头和表尾
后台管理系统,多半都有表格,数据量大的时候,需要固定表头或者底部. 因为饿了么是局部滚动的,现在我们需要改饿了么某些样式实现全局滚动 饿了么局部滚动 全局滚动demo 删除height=200 固 ...
- SQLServer 学习笔记之超详细基础SQL语句 Part 3
Sqlserver 学习笔记 by:授客 QQ:1033553122 -----------------------接Part 2------------------- 13. 使用compute对查 ...