封装一下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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
微信小程序聊天功能的示例代码
Jan 13 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
python通过post提交数据的方法
2015/05/06 Python
Flask之请求钩子的实现
2018/12/23 Python
python实现微信防撤回神器
2019/04/29 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
Python3.9新特性详解
2020/10/10 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
体现团队精神的口号
2014/06/06 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
个人欠条范本
2015/07/03 职场文书
教师培训简讯
2015/07/20 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript