封装一下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 相关文章推荐
javascript中"/"运算符常见错误
Oct 13 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
Vue实现手机计算器
Aug 17 Javascript
JS实现简单九宫格抽奖
Jun 28 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
一个ftp类(ini.php)
2006/10/09 PHP
留言板翻页的实现详解
2006/10/09 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP中each与list用法分析
2016/01/08 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
JQuery小知识
2010/10/15 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
jquery选择器简述
2015/08/31 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
npm的lock机制解析
2019/06/20 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
关于python3中setup.py小概念解析
2019/08/22 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
银河香水:Galaxy Perfume
2019/03/25 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
幼儿园数学教学反思
2014/02/02 职场文书
高中语文课后反思
2014/04/27 职场文书
师德承诺书
2015/01/20 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
Promise静态四兄弟实现示例详解
2022/07/07 Javascript