uniapp request封装与 api封装
时间: 2023-08-07 15:07:46 浏览: 117
在 uniapp 中,我们通常会封装 HTTP 请求和 API 接口函数,以便于我们在各个组件中复用代码。下面分别介绍一下 uniapp 中如何封装 HTTP 请求和 API 接口函数。
### 封装 HTTP 请求
在 uniapp 中,我们可以使用 `uni.request` 函数向后端发送 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)
}
})
})
}
```
以上代码定义了一个 `request` 函数,该函数使用 Promise 对象封装了 `uni.request` 函数,负责向后端发送 HTTP 请求,并在请求成功或失败时返回相应的 Promise 对象。
在需要发送 HTTP 请求的地方,可以直接使用 `request` 函数,例如:
```
request('/api/user').then((res) => {
console.log(res)
})
```
以上代码使用 `request` 函数向 `/api/user` 发送了一个 GET 请求,并在成功获取到数据后打印出来。
### 封装 API 接口函数
在 uniapp 中,我们通常会将 API 接口封装成函数,以便于在各个组件中复用。这里以获取用户信息的 API 接口为例:
```
import { request } from './request'
export function getUserInfo() {
return request('/api/user')
}
```
以上代码定义了一个 `getUserInfo` 函数,该函数调用封装好的 `request` 函数向 `/api/user` 发送一个 GET 请求,并返回 Promise 对象。
在需要使用该 API 接口的地方,可以直接引入 `getUserInfo` 函数并使用,例如:
```
import { getUserInfo } from './api'
getUserInfo().then((res) => {
console.log(res)
})
```
以上代码使用封装好的 `getUserInfo` 函数获取用户信息,并在成功获取数据后打印出来。
综上所述,我们可以将 HTTP 请求和 API 接口函数分别封装,并在需要使用的地方直接调用,以达到代码复用的目的。
阅读全文