js 封装axios工具类
时间: 2023-11-01 19:00:17 浏览: 44
可以使用axios来进行网络请求,并且封装成一个工具类,方便使用。以下是一个简单的示例代码:
```javascript
import axios from 'axios';
class Http {
constructor() {
this.instance = axios.create({
baseURL: 'http://your-api-url.com',
timeout: 5000, // 请求超时时间
});
// 请求拦截器
this.instance.interceptors.request.use(
(config) => {
// 在请求发送之前做一些处理
return config;
},
(error) => {
// 对请求错误做一些处理
return Promise.reject(error);
}
);
// 响应拦截器
this.instance.interceptors.response.use(
(response) => {
// 对响应数据做一些处理
return response.data;
},
(error) => {
// 对响应错误做一些处理
return Promise.reject(error);
}
);
}
// get请求
get(url, params = {}) {
return this.instance.get(url, { params });
}
// post请求
post(url, data = {}) {
return this.instance.post(url, data);
}
// put请求
put(url, data = {}) {
return this.instance.put(url, data);
}
// delete请求
delete(url, params = {}) {
return this.instance.delete(url, { params });
}
}
export default new Http();
```
使用示例:
```javascript
import Http from './http';
// get请求示例
Http.get('/user', { id: 1 }).then((res) => {
console.log(res);
});
// post请求示例
Http.post('/user', { name: '张三', age: 18 }).then((res) => {
console.log(res);
});
```
这里的Http类封装了常用的get、post、put和delete方法,并且使用axios.create创建了一个axios实例,可以在构造函数中对其进行配置,如设置baseURL和timeout等。同时,还通过拦截器对请求和响应进行了处理,可以根据需要进行修改。