封装一个好用的axios
时间: 2023-10-14 12:30:52 浏览: 36
好的,我可以为您封装一个简单易用的axios。
首先,需要安装axios库,可以通过以下命令进行安装:
```
npm install axios
```
然后,我将封装一个名为`myAxios`的模块,包含以下功能:
1. 可以设置请求的基础URL;
2. 可以设置请求的头部信息;
3. 可以发送GET、POST、PUT、DELETE等请求,并且可以传递参数和请求体;
4. 可以设置请求和响应的拦截器;
5. 返回Promise对象,可以使用then和catch方法进行链式调用。
以下是封装的代码:
```javascript
import axios from 'axios';
const myAxios = axios.create({
baseURL: '', // 设置请求的基础URL
headers: { // 设置请求的头部信息
'Content-Type': 'application/json',
},
});
// 请求拦截器
myAxios.interceptors.request.use(
config => {
// 在请求发送之前做一些处理
return config;
},
error => {
// 对请求错误做一些处理
return Promise.reject(error);
}
);
// 响应拦截器
myAxios.interceptors.response.use(
response => {
// 对响应数据做一些处理
return response.data;
},
error => {
// 对响应错误做一些处理
return Promise.reject(error);
}
);
export default {
get(url, params) { // GET请求
return myAxios.get(url, { params });
},
post(url, data) { // POST请求
return myAxios.post(url, data);
},
put(url, data) { // PUT请求
return myAxios.put(url, data);
},
delete(url, params) { // DELETE请求
return myAxios.delete(url, { params });
},
};
```
使用示例:
```javascript
import myAxios from './myAxios';
myAxios.get('/api/user', { id: 1 }).then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
});
myAxios.post('/api/user', { name: 'Jack', age: 20 }).then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
});
```
这样,就可以方便地使用封装好的axios了。