要在Typescript中使用Axios拦截器,首先需要安装axios库和@types/axios类型定义。可以通过以下命令安装它们:
npm install axios
npm install @types/axios
接下来,可以创建一个拦截器配置文件,例如axios.interceptor.ts,在该文件中定义拦截器的逻辑。以下是一个示例:
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
// 创建Axios实例
const instance: AxiosInstance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
});
// 请求拦截器
instance.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 在发送请求之前做一些处理,例如添加token等
console.log('请求拦截器');
return config;
},
(error) => {
// 错误处理
console.error('请求拦截器错误', error);
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
(response: AxiosResponse) => {
// 对响应数据做一些处理
console.log('响应拦截器');
return response;
},
(error) => {
// 错误处理
console.error('响应拦截器错误', error);
return Promise.reject(error);
}
);
export default instance;
在上面的示例中,我们创建了一个名为instance的Axios实例,并通过interceptors属性添加了请求和响应拦截器。在拦截器中可以编写需要执行的逻辑,例如在请求拦截器中添加token、在响应拦截器中处理响应数据等。
最后,可以在其他文件中使用这个拦截器配置文件。例如:
import axiosInstance from './axios.interceptor';
axiosInstance.get('/users')
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
});
上面的示例中,我们导入了拦截器配置文件中的axiosInstance实例并使用它来发送GET请求。在调用GET请求后,可以处理返回的数据或捕获错误。
这样就完成了在Typescript中使用Axios拦截器的配置和使用。