vue中使用封装的axios
时间: 2024-06-18 07:00:34 浏览: 15
Axios是一个基于Promise的HTTP客户端,可以用在浏览器和Node.js中。Vue.js框架中常用的是封装过的Axios库,可以通过配置实现拦截器、统一处理请求和响应等。
使用封装的axios,我们需要先安装axios和vue-axios两个库,并在main.js中引入和使用vue-axios插件。
在封装Axios时,我们通常会创建一个api.js文件,将所有的请求封装在其中,并对其进行统一处理和管理。在这个文件中,我们可以定义一个axios实例,配置baseURL、headers等参数,并通过拦截器对请求和响应进行统一处理。
例如:
```javascript
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://localhost:3000/api/',
timeout: 10000,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
// 请求拦截器
instance.interceptors.request.use(config => {
// 统一处理请求头等信息
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截器
instance.interceptors.response.use(response => {
// 统一处理响应结果等信息
return response.data
}, error => {
return Promise.reject(error)
})
export default instance
```
在需要使用Axios发送请求的地方,我们只需要引入api.js,并调用其中封装好的方法即可。
例如:
```javascript
import api from './api.js'
api.get('/users').then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
```
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)