关于使用axios的一些心得技巧分享


Posted in Javascript onJuly 02, 2017

本文主要跟大家介绍了关于使用axios的一些心得技巧,分享出来供大家参考学习,下面来一起看看详细的介绍:

一、带cookie请求

axios默认是请求的时候不会带上cookie的,需要通过设置withCredentials: true来解决。

二、使post请求发送的是formdata格式数据

首先必须设置请求头

//可以通过这种方式给axios设置的默认请求头
axios.defaults.headers = {
"Content-Type": "application/x-www-form-urlencoded"
}

其次再发送之前需要处理一下数据

// 发送请求前处理request的数据
axios.defaults.transformRequest = [function (data) {
// Do whatever you want to transform the data
let newData = ''
for (let k in data) {
newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'
}
return newData
}]

三、拦截器

你可以截取请求或响应在被 then 或者 catch 处理之前。

举个小例子:发ajax请求的时候需要有一个loading动画,而在请求回来之后需要把loading动画关掉,就可以使用这个拦截器来实现。

//添加请求拦截器
axios.interceptors.request.use(config => {
 //在发送请求之前做某事,比如说 设置loading动画显示
 return config
}, error => {
 //请求错误时做些事
 return Promise.reject(error)
})

//添加响应拦截器
axios.interceptors.response.use(response => {
 //对响应数据做些事,比如说把loading动画关掉
 return response
}, error => {
 //请求错误时做些事
 return Promise.reject(error)
})

//如果不想要这个拦截器也简单,可以删除拦截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/})
axios.interceptors.request.eject(myInterceptor)

ps:另外附上自己在项目中使用axios的方式

一般会将所有的ajax请求放在一个模块中,新建一个http.js

//http.js
//设置请求baseURL
axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
"Content-Type": "application/x-www-form-urlencoded"
}
// 发送请求前处理request的数据
axios.defaults.transformRequest = [function (data) {
let newData = ''
for (let k in data) {
 newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'
}
return newData
}]
// 带cookie请求
axios.defaults.withCredentials = true

//get请求
function get(url) {
 return body => axios.get(url, { params: body })
 }
//post请求
function post(url) {
return body => axios.post(url, body)
}

//导出使用 
export const login = get('/login')

假设配合vue使用

// 引入login模块
import { login } from 'http'
export default {
 methods:{
 //配合 async/await使用效果更佳
  async get() {
   try {
    let res = await login({ account: 'admin' })
    console.log(res)
   } 
   catch (e) {
    console.log(e)
   }
  }
 }
}

再另外有些人可能喜欢把axios挂载到Vue的原型上,从而在子组件内可以直接访问的到,做法如下:

Vue.prototype.$http = axios //其他页面在使用axios的时候直接 this.$http就可以了

除非页面足够简单,不然我个人不太喜欢这种做法。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
document.all与WEB标准
May 13 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
React服务端渲染(总结)
Jul 01 #Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 #Javascript
详解node-ccap模块生成captcha验证码
Jul 01 #Javascript
vue元素实现动画过渡效果
Jul 01 #Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 #Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 #Javascript
详解vue中computed 和 watch的异同
Jun 30 #Javascript
You might like
php打造属于自己的MVC框架
2012/03/07 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
利用Python开发实现简单的记事本
2016/11/15 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
中专自我鉴定范文
2013/10/16 职场文书
药学专业毕业生求职信
2013/10/20 职场文书
初中数学教学反思
2014/01/16 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
给校长的一封建议书
2014/03/12 职场文书
聘用意向书
2014/07/29 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
angular4实现带搜索的下拉框
2022/03/25 Javascript