详解Vue中使用Axios拦截器


Posted in Javascript onApril 22, 2019

需求是拦截前端的网络请求和相应。

废话不多说,直接上干货。

详解Vue中使用Axios拦截器

我用的是vue-cli3所以这个config文件是我自己创建的。

先介绍env.js

//根据不同的环境更改不同的baseUrl
let baseUrl = '';
 
//开发环境下
if (process.env.NODE_ENV == 'development') {
  baseUrl = '';
 
} else if (process.env.NODE_ENV == 'production') {
  baseUrl = '生产地址';
}
 
export {
  baseUrl,//导出baseUrl

在这里我首先设置了开发环境和生产环境的地址,并向外抛出。

在看一下axios.js

import {
  baseUrl, //引入baseUrl
} from "../config/env";
import axios from 'axios';
import qs from 'qs';
//引入vuex的js文件
import vuex from '../src/store/index';
 
// 创建 axios 实例
let service = axios.create({
  baseUrl: baseUrl,//请求前缀
  timeout: 20000, // 请求超时时间
  crossDomain: true,//设置cross跨域
  withCredentials: true//设置cross跨域 并设置访问权限 允许跨域携带cookie信息
})
 
// 设置 post 默认 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
 
// 添加请求拦截器
service.interceptors.request.use(
 
  (config) => {
    // console.log()
    //下面的代码是如何在拦截器中调用vuex管理状态。
    //我这里主要是做了一个蒙层的遮盖
    // vuex.$store.commit('OPEN_LOADING');
 
 
    //判断请求方式是否为POST,进行转换格式
    config.method === 'post'
      ? config.data = qs.stringify({...config.data})
      : config.params = {...config.params};
    // 请求发送前进行处理
    return config
  },
  (error) => {
    // 请求错误处理
    return Promise.reject(error)
  }
)
 
// 添加响应拦截器
service.interceptors.response.use(
  (response) => {
    let { data } = response;
    return data
  },
  (error) => {
    let info = {},
      { status, statusText, data } = error.response
 
    if (!error.response) {
      info = {
        code: 5000,
        msg: 'Network Error'
      }
    } else {
      // 此处整理错误信息格式
      info = {
        code: status,
        data: data,
        msg: statusText
      }
    }
  }
)
 
/**
 * 向外抛出service
 */
export default service

最后将这个axios.js文件引入main.js中,并将引入的axios挂载到Vue实例上就ok了。

完美!如有不对的地方还请各位大佬指点,万分感谢。

踩过的坑:

怎么在axios拦截器中使用vuex,首先我们要引入vuex的js文件,然后就可以用了,就这么简单。

以上所述是小编给大家介绍的Vue使用Axios拦截器详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 #Javascript
vue 项目build错误异常的解决方法
Apr 22 #Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 #Javascript
今天,小程序正式支持 SVG
Apr 20 #Javascript
详解Vue中组件的缓存
Apr 20 #Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 #Javascript
优雅地使用loading(推荐)
Apr 20 #Javascript
You might like
PHP实现文件安全下载
2006/10/09 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
基于滚动条位置判断的简单实例
2017/12/14 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python简单实现enum功能的方法
2016/04/25 Python
python逆向入门教程
2018/01/15 Python
Python判断有效的数独算法示例
2019/02/23 Python
python把转列表为集合的方法
2019/06/28 Python
Mac安装python3的方法步骤
2019/08/09 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
好矿嫂事迹材料
2014/01/21 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
王老吉广告词
2014/03/20 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers