uniapp vue3 request封装
时间: 2024-12-23 11:25:17 浏览: 94
UniApp是一个基于Vue.js的跨平台框架,它允许开发者编写一次代码,可以在iOS、Android等多个平台上运行。在Vue3中,对于网络请求的封装,通常会使用像axios、Vant的fetch或者@vant/api这样的库,它们提供了统一的API接口,简化了HTTP请求的管理。
以下是一个简单的uni-app Vue3中使用axios封装请求的例子:
```javascript
import axios from 'axios'
import { onShow, onHide } from '@/hooks'
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000, // 请求超时时间
withCredentials: true, // 是否带上cookie
headers: {
'Content-Type': 'application/json' // 默认请求头
}
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config
},
error => {
// 对请求错误做些什么
Promise.reject(error)
}
)
//响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做处理
return response.data
},
error => {
// 对响应错误做处理
console.log('err', error) // for debug
Promise.reject(error)
}
)
export default {
post(url, data) {
return service.post(url, data)
},
get(url, params) {
return service.get(url, { params })
},
... // 其他HTTP方法如delete、put等
}
// 使用示例
onShow(() => {
this.$request.get('/users') // 发起GET请求
.then(response => {
console.log(response)
})
.catch(error => {
console.error(error)
})
})
```
阅读全文
相关推荐

















