以下是一个简单的封装axios的示例代码:
import axios from 'axios';
/**
* 自定义封装axios实例
*/
const request = axios.create({
baseURL: 'https://api.example.com', // 设置基础URL
timeout: 5000, // 超时时间
});
/**
* 请求拦截器
*/
request.interceptors.request.use(
(config) => {
// 在请求发送之前做些什么
// 可以在这里设置请求头等信息
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
/**
* 响应拦截器
*/
request.interceptors.response.use(
(response) => {
// 对响应数据做些什么
return response.data;
},
(error) => {
// 对响应错误做些什么
return Promise.reject(error);
}
);
export default request;
上述代码中,我们首先通过 import
引入了 axios
模块,然后使用 axios.create()
方法创建了一个自定义的 axios
实例,该实例可以配置基础 URL、超时时间等。
接着,我们分别定义了请求拦截器和响应拦截器。在请求拦截器中,我们可以对请求进行一些处理,比如设置请求头等信息;在响应拦截器中,我们可以对响应进行处理,并返回处理后的数据。
最后,我们使用 export default
导出了定义好的 request
实例,以便在其他文件中使用。
接下来我们可以使用上面封装好的 axios
实例进行请求。
假设我们要请求一个后端 API,获取用户信息,可以参考如下代码:
import request from './request'; // 引入自定义的axios实例
/**
* 获取用户信息
* @param {string} userId 用户ID
*/
export function getUserInfo(userId) {
return request.get('/user/info', {
params: {
userId,
},
});
}
接着,我们就可以在其他地方调用 getUserInfo()
函数来获取用户信息,例如:
import { getUserInfo } from './api'; // 引入API接口
getUserInfo('123456').then((res) => {
console.log(res); // 打印获取到的用户信息
});