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. 【IT笔试面试题整理】不用加减乘除做加法

    [试题描述]写一个函数,求两个整数的和,要求在函数体内不得使用加减乘除四则运算符合. 基本思路是这样的: int A, B;A&B //看哪几位有进位A^B //不带进位加 考虑二进制加法的过 ...

  2. 我的MQ笔记

    1.安装IBM MQ 1.1.安装先决条件: (1)WebSphere  Eclipse  Platform  V3.01 (2)为Windows域用户配置WebSphere MQ用户 1.2.安装程 ...

  3. Java设计模式学习记录-适配器模式

    前言 之前已经将五个创建型设计模式介绍完了,从这一篇开始介绍结构型设计模式,适配器模式就是结构型模式的一种,适配器要实现的效果是把“源”过渡到“目标”. 适配器模式 在开发过程中,使用一个已经存在的类 ...

  4. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  5. WPF备忘录(4)打个勾画个叉娱乐下

    <Path Grid.Column="2" Data="M43,5 L20,40 20,40 0,20 6,15 18,26 37,7 43,5 z" F ...

  6. [日常] Go语言圣经-Panic异常,Recover捕获异常习题

    Go语言圣经-Panic异常1.当panic异常发生时,程序会中断运行,并立即执行在该goroutine中被延迟的函数(defer 机制)2.不是所有的panic异常都来自运行时,直接调用内置的pan ...

  7. API 与 SDK

    API 和SDK是软件行业的两个缩写词. API (Application Programming Interface)=应用程序编程接口 通过一套套的要求,用来管理应用程序之间的沟通.一个API相当 ...

  8. spring装配注解(IOC容器加载控制)ComponentScan及ComponentScans使用

    ComponentScan,只写入value,可扫描路径下装配的@Contrller.@Service.@Repository @ComponentScan(value = "com.tes ...

  9. Java-函数式编程(三)流(Stream)

    流使程序猿可以在抽象层上对集合进行操作. 从外部迭代到内部迭代 什么是外部迭代和内部迭代呢? 个人认为,外和内是相对集合代码而言. 如果迭代的业务执行在应用代码中,称之为外部迭代. 反之,迭代的业务执 ...

  10. IDEA创建Struts2报错——web.xml

    这里记录一个问题,用IDEA创建Struts2时会出现的错误,cannot resolve class or package ‘filter’,出现在web.xml文件中,不修改这个,那么你配置好了T ...