uniapp request封装与 api封装结合标准的完整示例
时间: 2023-11-28 09:06:21 浏览: 34
好的,下面是一个基于 uniapp 封装 API 和封装 HTTP 请求的示例:
```
// 封装 HTTP 请求
function request(url, data, method = 'GET') {
return new Promise((resolve, reject) => {
uni.request({
url,
data,
method,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
}
})
})
}
// 封装获取用户信息的 API
export function getUserInfo() {
return request('/api/user')
}
// 封装获取文章列表的 API
export function getArticleList() {
return request('/api/article')
}
// 封装获取文章详情的 API
export function getArticleDetail(id) {
return request(`/api/article/${id}`)
}
```
以上代码与之前的示例相同,定义了三个 API 接口函数,分别是获取用户信息、获取文章列表和获取文章详情。这些函数都是基于封装好的 `request` 函数实现的,该函数负责向后端发送 HTTP 请求,并返回 Promise 对象。
接下来,我们需要在 uniapp 的 `main.js` 中注册这些 API 接口:
```
import Vue from 'vue'
import App from './App'
import * as api from './api'
Vue.prototype.$api = api
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
```
以上示例中,我们将 `api` 对象注册到了 Vue 的原型上,这样在需要使用 API 接口的地方,可以通过 `this.$api` 直接访问相应的函数:
```
// 获取用户信息
this.$api.getUserInfo().then((res) => {
console.log(res)
})
// 获取文章列表
this.$api.getArticleList().then((res) => {
console.log(res)
})
// 获取文章详情
this.$api.getArticleDetail(1).then((res) => {
console.log(res)
})
```
以上示例中,我们通过 `this.$api` 访问了注册的 API 接口函数,并在成功获取数据后打印出来。