Axios 拦截器是一种强大的功能,允许你在请求被发送到服务器之前,或者服务器响应被送到应用之前,对其进行“拦截”和修改。这在你需要统一处理请求和响应,或者在请求发送前添加一些公共信息(如认证令牌)时非常有用。
Axios 提供了两种类型的拦截器:请求拦截器和响应拦截器。
请求拦截器
请求拦截器会在请求被发送到服务器之前被调用。你可以在这里修改请求的配置,例如添加请求头、设置超时时间等。
下面是一个使用请求拦截器的示例:
axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 // 例如,添加请求头 config.headers.Authorization = 'Bearer ' + localStorage.getItem('token'); return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });
在这个例子中,我们为所有请求添加了一个名为 Authorization 的请求头,其值为从 localStorage 中获取的 token。如果请求出现错误,我们直接返回一个被拒绝的 Promise。
响应拦截器
响应拦截器会在服务器响应被送到应用之前被调用。你可以在这里对响应数据进行一些处理,或者在响应错误时执行一些操作。
下面是一个使用响应拦截器的示例:
axios.interceptors.response.use(function (response) { // 对响应数据做点什么 // 例如,如果服务器返回的状态码为 200,则直接返回响应数据 if (response.status === 200) { return response.data; } else { // 如果状态码不是 200,则抛出错误 return Promise.reject(response.data); } }, function (error) { // 对响应错误做点什么 if (error.response.status) { // 如果服务器返回了状态码,则根据状态码处理错误 switch (error.response.status) { case 401: // 未授权,跳转到登录页面 router.push('/login'); break; case 403: // 禁止访问,提示用户 alert('你没有权限访问该页面'); break; default: // 其他错误,提示用户 alert('请求出错'); } return Promise.reject(error.response); } });
在这个例子中,我们检查服务器返回的状态码。如果状态码为 200,我们直接返回响应数据;否则,我们返回一个被拒绝的 Promise,并在控制台中打印错误信息。如果服务器返回了错误的状态码(如 401 或 403),我们还执行了一些额外的操作,如跳转到登录页面或提示用户。