关于使用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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
jquery禁用右键示例
Apr 28 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
jquery插件格式实例分析
Jun 16 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
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手册及PHP编程标准
2006/12/17 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
如何实现JS函数的重载
2006/09/22 Javascript
不懂JavaScript应该怎样学
2008/04/16 Javascript
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
python利用微信公众号实现报警功能
2018/06/10 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
异常和异常类的概念
2014/09/12 面试题
高校优秀辅导员事迹材料
2014/05/07 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS
Python实现对齐打印 format函数的用法
2022/04/28 Python