详解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 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
微信小程序组件生命周期的踩坑记录
Mar 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
python查看微信好友是否删除自己
2016/12/19 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
重构Python代码的六个实例
2020/11/25 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
工厂门卫岗位职责范本
2014/04/04 职场文书
五四演讲稿范文
2014/09/03 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
详解nginx location指令
2022/01/18 Servers