详解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 相关文章推荐
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
vue环境搭建简单教程
Nov 07 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
详解ES6中class的实现原理
Oct 03 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 error_log 函数的使用
2009/04/13 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
js面向对象编程总结
2017/02/16 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
一个超级简单的python web程序
2014/09/11 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
关于Python数据结构中字典的心得
2017/12/04 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
Python Cookie 读取和保存方法
2018/12/28 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
python爬虫请求头设置代码
2020/07/28 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
实习护理工作自我评价
2013/09/25 职场文书
大学新生欢迎词
2014/01/10 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
单位活动策划方案
2014/08/17 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
2015年消防工作总结
2015/04/24 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
什么是css原子化,有什么用?
2022/04/24 HTML / CSS