vue2基于axios封装reuest.js
时间: 2024-10-12 16:17:18 浏览: 15
Vue2 中基于 axios 封装的 `request.js` 通常是用于简化 Vue 应用程序对 API 的请求过程。它将 axios 这个流行的 JavaScript HTTP 客户端库集成到项目中,提供了一层便捷的接口,方便开发者发送 GET、POST 等各种类型的网络请求,并统一处理响应状态、错误以及数据转换等问题。
以下是一个简单的封装示例:
```javascript
import axios from 'axios';
const service = axios.create({
baseURL: process.env.VUE_APP_API_URL, // api base url
timeout: 5000, // 请求超时时间
headers: {
'Content-Type': 'application/json', // 默认请求头
},
});
// 静态方法
service.get, service.post, service.put, service.delete = ... // 封装常用HTTP动词
export default {
request: async (config) => {
try {
const response = await service(config);
if (response.status >= 200 && response.status < 300) {
return response.data;
} else {
throw new Error(response.statusText);
}
} catch (error) {
console.error(error); // 在这里可以添加错误处理逻辑
throw error; // 或者抛出错误供上一层处理
}
},
};
```
阅读全文