程序员青哥戈 axios封装
时间: 2023-10-08 12:13:55 浏览: 109
axios是一个基于Promise的HTTP库,可以用于浏览器和Node.js。下面是一个简单的axios封装示例:
```javascript
import axios from 'axios';
// 创建axios实例
const instance = axios.create({
baseURL: 'http://api.example.com', // 设置请求的baseURL
timeout: 5000, // 请求超时时间
});
// 请求拦截器
instance.interceptors.request.use(
config => {
// 在发送请求前做一些处理,例如添加token等
return config;
},
error => {
// 处理请求错误
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据做一些处理
return response.data;
},
error => {
// 处理响应错误
return Promise.reject(error);
}
);
export default instance;
```
以上代码创建了一个axios实例,并通过拦截器进行请求和响应的处理。你可以在请求拦截器中添加一些公共的请求头或参数,也可以在响应拦截器中对响应数据进行处理。
使用时,可以直接引入该封装好的axios实例,例如:
```javascript
import request from './api';
request.get('/users')
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});
```
这样可以减少重复的配置代码,并且有利于统一处理请求和响应。当然,根据具体项目的需求,你可以根据需要进行自定义封装。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)