Axios 提供了两种类型的拦截器:请求拦截器和响应拦截器。分别通过 axios.interceptors.request 和 axios.interceptors.response 来设置。
以下是一个简单的示例,演示如何使用 Axios 拦截器:
// 添加请求拦截器
axios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
console.log('请求拦截器:请求发送前');
return config;
},
function (error) {
// 对请求错误做些什么
console.error('请求拦截器:请求错误', error);
return Promise.reject(error);
}
);
// 添加响应拦截器
axios.interceptors.response.use(
function (response) {
// 对响应数据做些什么
console.log('响应拦截器:响应成功', response);
return response;
},
function (error) {
// 对响应错误做些什么
console.error('响应拦截器:响应错误', error);
return Promise.reject(error);
}
);
// 发起实际请求
axios.get('https://api.example.com/data')
.then(response => {
// 处理请求成功
console.log('请求成功', response);
})
.catch(error => {
// 处理请求失败
console.error('请求失败', error);
});
在上述示例中:
- 请求拦截器用于在请求发送之前执行一些操作,比如添加请求头、转换请求数据等。
- 响应拦截器用于在收到响应后执行一些操作,比如处理响应数据、检查响应状态等。
你可以根据需要添加多个拦截器,它们会按照添加的顺序依次执行。拦截器返回的值是一个 Promise,可以在拦截器中进行异步操作。
拦截器提供了一种强大的方式来全局处理请求和响应,使得你可以在请求和响应的不同阶段进行自定义操作。
转载请注明出处:http://www.zyzy.cn/article/detail/6282/Axios