axios拦截器

简介: axios拦截器

分请求拦截器、响应拦截器

1. 新建一个 utils 文件夹,新建一个 request.js

2. request.js 中写入以下模板

// 引入axios
import axios from 'axios';
import qs from 'qs';
// 创建axios实例
const instance = axios.create();
// 请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// 导出实例
export default instance;



3. 在需要的页面引入使用

1. request({
2. url: '',
3. params: { id: 1 }
4. }).then(data => {
5. })
相关文章
|
JavaScript 前端开发
axios拦截器的使用?
axios拦截器的使用?
|
2月前
|
缓存 JavaScript 搜索推荐
|
2月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
151 4
|
6月前
|
前端开发 开发工具 数据安全/隐私保护
大事件项目13----axios请求拦截器,统一携带token
大事件项目13----axios请求拦截器,统一携带token
|
6月前
|
前端开发 开发工具 git
大事件项目15----axios响应拦截器,统一判断401做被动退出
大事件项目15----axios响应拦截器,统一判断401做被动退出
|
5月前
|
JavaScript 前端开发 数据格式
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
306 0
|
7月前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
202 1
|
7月前
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
183 0
|
7月前
|
前端开发
axios拦截器的使用?
axios拦截器的使用?
53 0