详解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的.live()和.die() 使用介绍
Sep 10 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
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实现ping
2006/10/09 PHP
详细介绍PHP应用提速面面观
2006/10/09 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Python自动抢红包教程详解
2019/06/11 Python
python调用自定义函数的实例操作
2019/06/26 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
python eventlet绿化和patch原理
2020/11/21 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
九年级家长会邀请函
2014/01/15 职场文书
岗位职责的构建方法
2014/02/01 职场文书
境外导游求职信
2014/02/27 职场文书
绿化工程实施方案
2014/03/17 职场文书
小学运动会入场口号
2015/12/24 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python