封装一下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 相关文章推荐
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
Javascript的闭包详解
Dec 26 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 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 变量定义和变量替换的方法
2009/07/30 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
基于python绘制科赫雪花
2018/06/22 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
岗位说明书标准范本
2014/07/30 职场文书
单位活动策划方案
2014/08/17 职场文书
民主生活会汇报材料
2014/12/15 职场文书
阿甘正传观后感
2015/06/01 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
python数字类型和占位符详情
2022/03/13 Python