前言:
为什么引入拦截器?直接发请求不好吗?
因为,有些网络请求在发送之前,都要进行一个拦截,例如,在报文上拼接/修改一些东西,在发送请求前在页面上增加动画效果等等。
此时,就需要拦截已经发出去的请求。
具体会使用axios提供的拦截器,支持客户端请求拦截和服务器响应拦截。
axios 拦截器基本使用:
局部使用拦截器,interceptors
instance1.interceptors.request.use( success, failure)
instance1.interceptors.response.use( success, failure)
其中,success/failure 是回调函数,表示如果拦截成功,则回调对应的函数。
注意:拦截并做出操作后,应该把拦截的数据释放,所以必须要return (config/res)
// ./src/network/request.js
import axios from 'axios';
export function Request(config){
const instance1 = axios.create({
baseURL: 'http://httpbin.org',
timeout : 5000
});
instance1.interceptors.request.use(
config =>{
console.log(config); return config;},
err=>{
console.log(err);}
);
instance1.interceptors.response.use(
res =>{
console.log(res.data);return res.data;},
err =>{
console.log('response error');}
);
return instance1(config);
};
对于请求拦截,由于是用axios发送,起初的config只有一个属性,
即,config = { url :'/get'}
但是,被axios当做配置,封装成网络请求发送出去后,加了很多东西,如下:
对于 响应拦截,开始服务器发送过来的是只有http报文数据,但是经过了axios拦截,加上了很多封装信息,如下:
可以看到,真正发送过来的只有data{},其他全是axios封装的信息项