要二次封装 `axios`,可以创建一个自定义的 `axios` 实例,并添加一些全局配置和拦截器。下面是一个简单的示例代码:
import axios from 'axios';
// 创建自定义的axios实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置默认请求的URL
timeout: 5000, // 设置默认的超时时间,单位为毫秒
headers: {
'Content-Type': 'application/json', // 设置默认的请求头
},
});
// 添加请求拦截器
instance.interceptors.request.use(
function(config) {
// 在发送请求之前做些处理,比如添加token等
// config.headers['Authorization'] = 'Bearer ' + getToken(); // 示例:添加token到请求头
return config;
},
function(error) {
//处理请求错误
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
function(response) {
// 对响应数据做些处理
return response.data;
},
function(error) {
// 处理响应错误
return Promise.reject(error);
}
);
export default instance;
在这个示例中,我们使用 `axios.create` 方法创建了一个自定义的 `axios` 实例 `instance`。在创建实例时,我们可以通过 `baseURL` 设置默认的请求URL,`timeout` 设置默认的超时时间,`headers` 设置默认的请求头。
然后,我们使用 `instance.interceptors` 添加了请求拦截器和响应拦截器。请求拦截器可以在发送请求之前对请求进行一些处理,比如添加token到请求头。响应拦截器可以对响应数据进行一些处理,比如提取响应的数据部分。
最后,我们将自定义的 `axios` 实例 `instance` 导出,以便在项目的其他地方使用。
使用二次封装后的 `axios`,可以像下面这样发送请求:
import axios from './customAxios'; // 假设我们将自定义axios实例的代码放在了customAxios.js文件中
axios.get('/api/users')
.then(function(response) {
// 处理响应数据
})
.catch(function(error) {
// 处理请求错误
});
这样,我们就可以在项目中使用二次封装后的 `axios` 实例进行网络请求,并享受到全局配置和拦截器带来的便利。根据实际需求,你可以对代码进行修改和扩展。