uniapp vue3 请求封装
时间: 2023-11-11 12:04:27 浏览: 81
对于Uniapp和Vue3的请求封装,你可以按照以下步骤进行:
1. 首先,创建一个api文件夹用于存放API请求相关的文件。
2. 在api文件夹中创建一个request.js文件。在该文件中,可以使用axios或者uni.request等库来进行网络请求。以下是一个使用axios的示例:
```javascript
import axios from 'axios'
const request = axios.create({
baseURL: 'http://your-api-base-url.com', // 设置请求的基础URL
timeout: 5000 // 设置请求超时时间
})
request.interceptors.request.use(
config => {
// 在发送请求之前可以做一些处理,比如设置请求头等
return config
},
error => {
// 请求错误处理
return Promise.reject(error)
}
)
request.interceptors.response.use(
response => {
// 对响应数据进行处理
return response.data
},
error => {
// 响应错误处理
return Promise.reject(error)
}
)
export default request
```
3. 在api文件夹中创建一个api.js文件,用于定义具体的API接口。以下是一个示例:
```javascript
import request from './request'
export function getUserInfo(userId) {
return request.get(`/user/${userId}`)
}
export function login(data) {
return request.post('/login', data)
}
```
4. 在需要发送请求的组件中,引入api.js文件,然后调用相应的API接口即可。例如:
```javascript
import { getUserInfo, login } from '@/api/api.js'
export default {
methods: {
async fetchData() {
try {
const userInfo = await getUserInfo(123)
console.log(userInfo)
} catch (error) {
console.error(error)