详解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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
使用js和canvas实现时钟效果
Sep 08 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警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
vue实现记事本功能
2019/06/26 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
Python3 伪装浏览器的方法示例
2017/11/23 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
商务英语求职自荐信范文
2013/12/24 职场文书
公益广告语集锦
2014/03/13 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
中小企业员工手册范本
2015/05/14 职场文书
学校运动会加油词
2015/07/18 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python