详解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 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
使用react render props实现倒计时的示例代码
Dec 06 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
自己动手做一个SQL解释器
2006/10/09 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python中标准模块importlib详解
2017/04/16 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
受欢迎的大学生自我评价
2013/12/05 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
新郎接新娘保证书
2015/05/08 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
2016年教代会开幕词
2016/03/04 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
Hive导入csv文件示例
2022/06/25 数据库