vueaxios封装
时间: 2024-09-09 22:09:38 浏览: 42
vue axios封装httpjs,接口公用配置拦截操作
VueAxios是一个基于Vue.js和axios库的轻量级封装,它简化了在Vue组件中使用axios发送HTTP请求的过程。通过VueAxios,你可以更方便地管理axios实例、处理响应、错误处理以及提供一些常用的功能如GET、POST、PUT等。以下是VueAxios的一般使用步骤:
1. 安装:首先需要安装`vue-axios`和`axios`依赖,可以使用npm或yarn:
```bash
npm install vue-axios axios
# 或者
yarn add vue-axios axios
```
2. 引入并配置:在main.js或单文件组件的`setup`钩子函数中引入并配置VueAxios:
```javascript
import Vue from 'vue'
import { createAxiosInstance } from 'vue-axios'
const instance = createAxiosInstance({
baseURL: process.env.BASE_API, // API的基础URL
timeout: 5000, // 请求超时时间
headers: {
'Content-Type': 'application/json'
}
})
Vue.prototype.$http = instance
```
3. 使用:现在可以在Vue组件中像操作原生axios一样使用$http:
```javascript
methods: {
fetchData() {
this.$http.get('/api/data').then(response => {
console.log(response.data)
}).catch(error => {
console.error(error)
})
}
}
```
阅读全文