Vue封装 axios
时间: 2023-10-09 13:08:39 浏览: 38
的原理是什么?
Vue封装axios的原理是将axios封装成Vue插件,通过Vue.use()方法将axios插件引入到Vue项目中,然后在Vue组件中使用this.$axios来发起HTTP请求。这种封装方式可以让HTTP请求以Vue实例的形式进行管理,方便统一管理HTTP请求的headers、interceptors等配置,减少重复代码的编写。
相关问题
vue 封装 axios
以下是Vue封装Axios的示例代码:
```javascript
// 引入axios
import axios from 'axios'
// 创建axios实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置请求的base url
timeout: 5000 // 设置请求超时时间
})
// 封装get请求
export function get(url, params) {
return instance.get(url, {params})
}
// 封装post请求
export function post(url, data) {
return instance.post(url, data)
}
```
在上面的代码中,我们首先引入了axios,并创建了一个axios实例。然后,我们封装了get和post请求,这两个方法分别对应了axios实例的get和post方法。在这里,我们可以设置请求的base url和超时时间,也可以设置请求头等其他参数。
vue封装axios
Vue封装Axios可以提高项目的代码重用性和可维护性,以下是一个简单的示例:
1. 安装Axios
```bash
npm install axios --save
```
2. 创建src/api目录,并在其中创建index.js文件
```javascript
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000,
})
service.interceptors.request.use(
config => {
// 在请求发送之前,对请求进行一些配置处理
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
// 对响应数据进行处理
const res = response.data
if (res.code !== 200) {
console.error(res.message)
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log(error)
return Promise.reject(error)
}
)
export default service
```
在上面的代码中,我们使用Axios的create方法创建了一个实例,并添加了请求和响应的拦截器。在请求拦截器中,我们可以对请求进行配置处理,如添加请求头、修改请求参数等。在响应拦截器中,我们可以对响应数据进行处理,如根据返回的code值判断请求是否成功等。
3. 在组件中使用封装好的Axios
```javascript
import api from '@/api'
export default {
methods: {
fetchData() {
api.get('/data')
.then(res => {
console.log(res)
})
.catch(error => {
console.log(error)
})
}
}
}
```
在上面的代码中,我们通过import语句引入封装好的Axios实例,并在fetchData方法中使用该实例发送请求。由于我们在封装Axios时添加了拦截器,所以我们可以对请求和响应进行统一处理,使得我们在组件中的代码更加简洁和易于维护。