uniapp请求接口封装
时间: 2023-08-04 12:04:35 浏览: 53
Uniapp是一个跨平台应用开发框架,可以在不同的移动端和Web端上使用。在Uniapp中,我们可以使用uni.request()方法来发起网络请求。为了方便地管理和封装网络请求,我们可以将请求接口封装成一个独立模块,下面是一个简单的示例:
1. 首先,在项目中创建一个request.js文件,用于封装请求接口。
2. 在request.js中,定义一个request函数,用于发起网络请求。可以在该函数中设置请求方式、请求头、请求参数等。
3. 在需要调用接口的页面中,引入request.js文件,并调用request函数。
4. 在request函数中,可以通过Promise对象来处理异步请求,并在请求成功或失败后返回相应的数据。
下面是一个简单的封装示例:
```javascript
// request.js
const BASE_URL = 'https://api.example.com'
export default function request(url, method, data) {
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + url,
method: method,
data: data,
header: {
'Content-Type': 'application/json'
},
success: res => {
resolve(res.data)
},
fail: err => {
reject(err)
}
})
})
}
```
在需要调用接口的页面中,可以这样使用:
```javascript
// index.vue
import request from '@/utils/request.js'
export default {
data() {
return {
userInfo: {}
}
},
mounted() {
this.getUserInfo()
},
methods: {
getUserInfo() {
request('/user/info', 'GET', { id: 123 })
.then(res => {
this.userInfo = res
})
.catch(err => {
console.log(err)
})
}
}
}
```
在上面的示例中,我们封装了一个request函数用于发起网络请求,并在页面中引入并调用该函数。在request函数中,我们通过Promise对象来处理异步请求,并在请求成功或失败后返回相应的数据。