首先我们先创建axios实例

const service = axios.create({
baseURL: url, //是用于请求的服务器 URL
timeout: 5000, // 请求超时时间 如果请求话费了超过 `timeout` 的时间,请求将被中断
headers: {'X-Custom-Header': 'foobar'} // 自定义请求头
});

其他属性参考:https://www.kancloud.cn/yunye/axios/234845

接下来我们来添加拦截器

// 添加请求拦截器
service .interceptors.request.use(function (config) { // 在发送请求之前做些什么
  // 列如
  config.headers['usertoken'] = token;
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); // 添加响应拦截器
service .interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });

  假设你想移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

  

axios设置请求拦截和响应拦截的更多相关文章

  1. axios设置请求头内容

    axios设置请求头中的Authorization 和 cookie 信息: GET请求 axios.get(urlString, { headers: { 'Authorization': 'Bea ...

  2. Vue之拦截与响应拦截

    vue中有一个拦截方法,当我们发起请求或者请求回来的时候,我们需要做一定的数据过滤或者拦截 下面是在开发项目时进行的一个axios的请求封装: 拦截器:就是我们在请求之前进行的一个操作比如说,我们可以 ...

  3. axios设置请求头失效的问题

    前言:因为在使用vue-element-admin框架时遇到了设置请求头失效的问题,在后来发现是代理跨域问题,所以又简单理解了一下跨域. 出现的问题是我在axios拦截器上设置了请求头token,但是 ...

  4. vue中 请求拦截 响应拦截设置

    第一,在项目的src中新建http.js文件,将以下代码复制进去 import axios from 'axios' import { Message, Loading } from 'element ...

  5. axios请求响应拦截器的应用

    什么是axios拦截器? 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理 例如添加统一cookie.请求体加验证.设置请求头 ...

  6. vue axios请求/响应拦截器

    // main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...

  7. vue中使用axios与axios的请求响应拦截

    VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...

  8. Vue axios封装 实现请求响应拦截

    封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...

  9. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

随机推荐

  1. hive基本操作与应用

    通过hadoop上的hive完成WordCount 启动hadoop Hdfs上创建文件夹 上传文件至hdfs 启动Hive 创建原始文档表 导入文件内容到表docs并查看 用HQL进行词频统计,结果 ...

  2. Web前端 前端相关书籍推荐

    一.HTML篇 1)<精通HTML> 2)<HTML5秘籍> 3)<HTML5权威指南> 4)<Head First HTML5 Programming(中文 ...

  3. js当地天气调用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. wav格式文件、pcm数据

    wav格式文件是常见的录音文件,是声音波形文件格式之一,wav 文件由文件头和数据体两部分组成. 文件头是我们在做录音保存到文件的时候,要存储的文件的说明信息,播放器要通过文件头的相关信息去读取数据播 ...

  5. Websocket-Sharp获取客户端IP地址和端口号

    //OnOpen事件 protected override void OnOpen() { string IPAddress = base.Sessions.Sessions.First().Cont ...

  6. windows压缩图片

  7. MySQL(InnoDB)是如何处理死锁的

    MySQL(InnoDB)是如何处理死锁的 一.什么是死锁 官方定义如下:两个事务都持有对方需要的锁,并且在等待对方释放,并且双方都不会释放自己的锁. 这个就好比你有一个人质,对方有一个人质,你们俩去 ...

  8. 是时候选择一款富文本编辑器了(wangEditor)

    需要一款富文本编辑器,当然不能自己造轮子.本来想使用cnblog也在用的TinyMCE,名气大,功能全.但是发现TinyMCE从4.0开始,不再支持直接下载.所以还是决定选用wangEditor.遗憾 ...

  9. Linux新手随手笔记1.1

    ifconfig   查询网卡信息 分别是网卡名称,物理IP地址,MAC地址,RX收到数据包大小,TX发送数据包大小 # uname # uname -a 查看内核版本号 # hostname 查看主 ...

  10. Oracle 11g全表扫描以Direct Path Read方式执行

    在Oracle Database 11g中有一个新特性,全表扫描可以通过直接路径读的方式来执行(Direct Path Read),这是一个合理的变化,如果全表扫描的大量数据读取是偶发性的,则直接路径 ...