封装一下vue中的axios示例代码详解


Posted in Javascript onFebruary 16, 2020

在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios文档。

安装

npm install axios; // 安装axios

好了,下面开始今天的正文。

此次封装用以解决: (对于登录功能的可以直接使用,其他网络请求也可以直接用,如果有洁癖,可以把token有关的几行代码删掉)

ps:使用时得的引入axios时: import axios from '这个文件的名字及相对路径'

  • 接受后台token
  • post参数自动转换,省略qs.stringify()
  • 后台token过期之后自动清除本地数据,以便下次再次输入账号密码
  • 更好的错误提示信息
/**
 * 封装网络请求
 */
import axios from "axios"
import qs from "querystring"
import store from '../store'
import router from '../router'
//token过期之后重新回登录界面
const toLogin = () =>{
 router.push("/login")
}
// 错误信息响应方法
const errroHandle = (status,other) => {
 switch(status){
  case 400:
   console.log("服务器无法理解请求信息");
   break;
  case 401:
   console.log("用户信息验证失败");
   localStorage.removeItem("token"); // 可选项
   toLogin();
   break;
  case 403:
   console.log("请求被限制");
   localStorage.removeItem("token"); // 可选项
   toLogin();
   break;
  case 404:
   console.log("客户端请求信息错误");
   break;
  default:
   console.log(other);
   break;
 }
}
// 创建axios对象
const instance = axios.create({
 timeout:5000
})
// 挂在全局对象
instance.defaults.baseUrl = "";
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 拦截器:请求拦截和响应拦截 post请求参数需要转码
// axios的返回值对象要求是一个promise对象
instance.interceptors.request.use(config =>{
 if(config.method === "post"){
  config.data = qs.stringify(config.data)
 }
 if(store.state.token){
  config.headers.authorization = store.state.token;
 }
 return config;
},error => Promise.reject(error))
instance.interceptors.response.use(
 // 成功
 response => response.status === 200 ? Promise.resolve(response) :Promise.reject(response),
 // 失败
 error => {
  const { response } = error;
  if(response){
   errroHandle(response.status,response.data)
   return Promise.reject(response)
  }else{
   // 错误信息都无法返回
   console.log("请求被中断");
  }
 }
)
export default instance

总结

以上所述是小编给大家介绍的封装一下vue中的axios示例代码详解,希望对大家有所帮助!

Javascript 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
Vue.js的模板语法详解
Feb 16 #Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 #Javascript
vue数据响应式原理知识点总结
Feb 16 #Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 #Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 #Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 #Javascript
js表达式与运算符简单操作示例
Feb 15 #Javascript
You might like
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
python str与repr的区别
2013/03/23 Python
Python入门篇之列表和元组
2014/10/17 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
小学毕业感言500字
2014/02/28 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
转让协议书
2015/01/27 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android