作为一名资深的前端开发工程师,现在需要进行网络请求封装,有一下几点要求 1、使用axios进行网络请求 2、需要包含请求拦截和响应拦截,在请求拦截器里面需要包含验证token, 显示loading效果 3、封装好get,post,put三种请求方式 然后默认到处三种请求方式,请给出具体的示例代码并做好注释
时间: 2024-04-07 15:32:59 浏览: 49
【鸿蒙版axios请求封装包】
当然,我可以帮你提供示例代码来满足你的需求。以下是一个网络请求封装的示例,使用axios库进行请求,并包含请求拦截和响应拦截。
```javascript
import axios from 'axios';
// 创建一个axios实例
const instance = axios.create({
baseURL: 'http://api.example.com', // 设置基础URL
timeout: 5000 // 设置请求超时时间
});
// 请求拦截器
instance.interceptors.request.use(
config => {
// 在发送请求之前做一些处理,比如添加token、显示loading等
const token = getToken();
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
showLoading();
return config;
},
error => {
// 处理请求错误
hideLoading();
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
// 在接收到响应后做一些处理,比如隐藏loading等
hideLoading();
return response.data;
},
error => {
// 处理响应错误
hideLoading();
return Promise.reject(error);
}
);
// 封装get请求
export function get(url, params) {
return instance.get(url, { params });
}
// 封装post请求
export function post(url, data) {
return instance.post(url, data);
}
// 封装put请求
export function put(url, data) {
return instance.put(url, data);
}
```
在上述示例代码中,我们首先创建了一个axios实例,并设置了基础URL和超时时间。然后,我们通过请求拦截器在发送请求之前进行一些处理,比如添加token和显示loading效果。在响应拦截器中,我们对接收到的响应进行处理,比如隐藏loading效果。最后,我们封装了get、post和put三种请求方式,并导出它们。
你可以根据实际需求修改上述示例代码,并添加适合你项目的验证token和loading效果的具体实现。希望这对你有所帮助!
阅读全文