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. [机器学习] 训练集(train set) 验证集(validation set) 测试集(test set)

    在有监督(supervise)的机器学习中,数据集常被分成2~3个即: 训练集(train set) 验证集(validation set) 测试集(test set) 一般需要将样本分成独立的三部分 ...

  2. nodejs的__dirname,__filename,process.cwd()区别

    假定我们有这样一个mynode的node项目在User/leinov/porject/文件夹下,cli是一个可执行文件 |-- mynode |-- bin |-- cli.js |-- src |- ...

  3. C#快速读写文件

    一.写入 //在应用程序当前目录下的File1.txt文件中追加文件内容,如果文件不存在就创建,默认编码 File.AppendAllText("File1.txt", " ...

  4. C# 导出Excel表格

    function exportExcel() { //查询条件 var startTime = F.ui.startTime.getText() == "" ? null : F. ...

  5. CentOS命令行与shell操作(linux系管与运维二)

    原创作品,转载请注明出处:https://www.cnblogs.com/sunshine5683/p/10293729.html 在上篇文章中总结了Linux常用的开机与关机以及重启的命令,今天继续 ...

  6. HDU6186(线段树)

    CS Course Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  7. HDU1698(KB7-E 线段树)

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  8. DRF序列化/反序列化

    反序列化(不推荐版):两个字段 一个为正序准备,一个为反序准备重写create update方法 1. 确定数据结构: 自己定义key book_obj = { "title": ...

  9. 解决myeclipse2017安装后闪退问题

    修改myeclipse的配置文件myeclipse.ini: 1.将-vm下面的路径改成自己的jdk的javaw.exe的路径 2.在文档最后加上两条语句: -Dgenuitec.honorDevMo ...

  10. 2016计蒜之道复赛 百度地图的实时路况(Floyd 分治)

    题意 题目链接 Sol 首先一个结论:floyd算法的正确性与最外层\(k\)的顺序无关(只要保证是排列即可) 我大概想到一种证明方式就是把最短路树上的链拿出来,不论怎样枚举都会合并其中的两段,所以正 ...