vue3axios封装与使用
时间: 2023-08-05 16:38:23 浏览: 125
详解vue中axios的使用与封装
Vue3Axios是一个基于Vue3和Axios的网络请求库。下面是Vue3Axios的封装和使用步骤:
1. 安装Vue3Axios
你可以通过npm或者yarn安装Vue3Axios:
```
npm install vue3-axios --save
```
或者
```
yarn add vue3-axios
```
2. 封装Vue3Axios
在src目录下新建一个api目录,用于封装Vue3Axios。在api目录下新建一个index.js文件,用于封装Vue3Axios的实例。代码如下:
```
import axios from 'axios'
import { reactive } from 'vue'
const instance = axios.create({
baseURL: 'http://localhost:3000', // 接口的基础路径
timeout: 10000 // 超时时间
})
const state = reactive({
loading: false // 请求状态
})
// 请求拦截器
instance.interceptors.request.use(
config => {
state.loading = true // 请求开始,loading为true
return config
},
error => {
state.loading = false // 请求出错,loading为false
return Promise.reject(error)
}
)
// 响应拦截器
instance.interceptors.response.use(
response => {
state.loading = false // 响应结束,loading为false
return response
},
error => {
state.loading = false // 响应出错,loading为false
return Promise.reject(error)
}
)
export default {
get(url, params) {
return instance.get(url, { params })
},
post(url, data) {
return instance.post(url, data)
},
put(url, data) {
return instance.put(url, data)
},
delete(url) {
return instance.delete(url)
},
state // 请求状态
}
```
在这段代码中,我们使用了Vue3的reactive函数来实现数据响应式,同时封装了四个常用的网络请求方法,并且添加了请求和响应拦截器来处理请求状态。
3. 使用Vue3Axios
在组件中使用封装好的Vue3Axios。代码如下:
```
<template>
<div>
<div v-if="api.state.loading">正在加载...</div>
<div v-else>{{ result }}</div>
</div>
</template>
<script>
import api from '@/api'
export default {
data() {
return {
result: ''
}
},
mounted() {
api.get('/api/test').then(res => {
this.result = res.data
})
}
}
</script>
```
在组件中,我们通过导入封装好的Vue3Axios实例,来进行网络请求。在请求过程中,我们可以使用reactive函数封装的state对象来获取请求状态。
阅读全文