封装一个axios网络请求,并区分get,post请求
时间: 2023-07-20 22:38:25 浏览: 435
vue axios数据请求get、post方法及实例详解
好的,以下是一个封装了 Axios 网络请求并区分 GET、POST 请求的示例代码:
```javascript
import axios from 'axios';
const service = axios.create({
baseURL: 'http://localhost:3000', // 接口的基础路径,根据实际情况修改
timeout: 5000, // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在请求发送之前,可以在这里对请求进行一些处理,比如添加请求头、设置请求数据格式等
return config;
},
error => {
// 请求错误时,可以在这里进行一些处理,比如提示错误信息等
console.log(error);
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 在响应数据返回之前,可以在这里对响应进行一些处理,比如过滤数据、统一处理错误码等
return response.data;
},
error => {
// 响应错误时,可以在这里进行一些处理,比如提示错误信息等
console.log(error);
return Promise.reject(error);
}
);
// 封装一个 GET 请求
export function get(url, params) {
return service({
url,
method: 'get',
params,
});
}
// 封装一个 POST 请求
export function post(url, data) {
return service({
url,
method: 'post',
data,
});
}
```
在上述代码中,我们通过封装 `get` 和 `post` 方法来区分 GET 和 POST 请求。在这两个方法中,我们都是通过 `service()` 方法来发送请求,只是在配置中指定了不同的请求方法(method)、请求参数(params 或 data)。最后,我们将这两个方法导出,供其他地方使用。
阅读全文