详解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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
JSONP跨域请求
Mar 02 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
了解重排与重绘
May 29 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 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中cookies使用指南
2007/03/16 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
学python需要去培训机构吗
2020/07/01 Python
python中pop()函数的语法与实例
2020/12/01 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
如何定义一个可复用的服务
2014/09/30 面试题
技能比赛获奖感言
2014/02/14 职场文书
工程管理英文求职信
2014/03/18 职场文书
自我鉴定标准格式
2014/03/19 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers