uniapp request封装
时间: 2023-08-29 19:05:25 浏览: 118
UniApp是一款基于Vue.js的跨平台应用框架,提供了一套完整的端到端的解决方案,使得开发人员能够用一套代码同时发布到多个平台。在UniApp中,我们可以使用uni.request API来发起网络请求,但是如果每次都写一遍uni.request API,不仅代码重复率高,而且不利于维护。因此,我们可以对uni.request API进行封装,使得我们可以更加方便地使用。
以下是一个简单的UniApp Request封装示例:
```javascript
// api.js
export default function request(options) {
return new Promise((resolve, reject) => {
uni.request({
url: options.url,
method: options.method || 'GET',
data: options.data || {},
header: options.header || {},
success: res => {
if (res.statusCode === 200) {
resolve(res.data)
} else {
reject(res)
}
},
fail: err => {
reject(err)
}
})
})
}
```
在此示例中,我们定义了一个名为request的函数,它接受一个options对象作为参数,并返回一个Promise对象。我们在该函数中调用uni.request API发起网络请求,并将请求结果转换为Promise对象进行返回。这样做的好处是,我们可以在调用request函数时使用Promise的then和catch方法来处理请求结果,而不用在每个请求中都写一遍相同的代码。
使用示例:
```javascript
import request from '@/api'
request({
url: 'https://example.com/api/test',
method: 'POST',
data: {
name: 'John Doe',
age: 30
},
header: {
'Content-Type': 'application/json'
}
}).then(res => {
console.log(res)
}).catch(err => {
console.error(err)
})
```
在此示例中,我们引入了上面定义的request函数,并使用它来发起一个POST请求。我们可以看到,调用request函数时只需要传递一个包含请求参数的options对象即可。如果请求成功,我们将在then回调函数中处理请求结果;如果请求失败,我们将在catch回调函数中处理错误。
阅读全文