一、拦截器介绍
- 一般在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。
请求拦截器
- 在请求发送之前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装。
响应拦截器
- 响应拦截器在响应数据之前进行必要的操作，只是在请求得到响应之后，对响应体的一些处理，通常用来对数据的处理、判断登陆失效等。
二、Axios实例
- 创建axios实例
// 引入axios
import axios from 'axios'
// baseURL设置
let baseURL = 'xxxxxxxxxxx'
// 创建实例
let http1 = axios.create({
baseURL,
timeout: 2000 // 毫秒
})
- 修改实例配置的三种方式
// 第一种：局限性比较大
axios.defaults.baseURL = 'xxxxx'
axios.defaults.timeout = 1000;
// 第二种：实例配置
let http1 = axios.create({
baseURL,
timeout: 2000 // 超时401
})
// 创建完成后修改
http1.defaults.timeout = 3000
// 第三种：发起请求时修改配置
http1.get('/xxx', {
timeout: 5000
})
- 注：这三种修改配置方法的优先级如下：请求配置 > 实例配置 > 全局配置
三、配置拦截器
// 请求拦截器
实例1.interceptors.request.use(config => {}, err => {})
// 响应拦截器
实例1.interceptors.respone.use(respone => {}, err => {})
- 从上可以看出对其进行拦截实例1，请求用config，响应用response，两者都有两个配置项，一个是成功配置，一个是error配置。
- 请求拦截器
// use(两个参数)
axios.interceptors.request.use(config => {
// 在发送请求前做一些事
....
return config
}, err => {
// 在请求错误时做的事儿
return Promise.reject(err)
})
- 响应拦截器
// use(两个参数)
axios.interceptors.respone.use(respone => {
// 请求成功对响应数据做处理
....
// 该返回的数据则是axios().then(res)中接受的数据
return respone
}, err => {
// 在请求错误时做的事儿
// 该返回的数据则是axios.catch(err)中接收的数据
return Promise.reject(err)
})
-
常见错误码处理（error）
- axios请求错误时，可在catch里进行错误处理。
axios.get().then().catch(err => { // 错误处理 })
标签：基本,err,axios,请求,实例,响应,拦截器 来源： https://www.cnblogs.com/bingquan1/p/15848614.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。