1. 背景
在开发uniapp的过程中,我们经常需要发送网络请求获取各种数据,uniapp提供了一个内置的网络请求方法uni.request,但是使用起来比较繁琐,需要编写大量的重复代码,所以我们可以考虑封装一下uni.request方法,简化请求过程,提高开发效率。
2. 封装过程
2.1 定义封装方法
我们可以定义一个方法,命名为request,用来发送网络请求,该方法封装了uni.request方法,具体实现如下所示:
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 => {
resolve(res.data)
},
fail: err => {
reject(err)
}
})
})
}
在上面的代码中,我们使用了es6的promise语法来处理异步请求,当请求成功时,我们使用resolve方法将结果返回,当请求失败时,我们使用reject方法返回错误信息。
2.2 使用封装方法
使用封装方法非常简单,只需要传入一个对象包含请求相关的参数即可。例如:
request({
url: 'https://www.example.com/api/users',
method: 'POST',
data: {
name: '张三',
age: 18
},
header: {
'content-type': 'application/json'
}
}).then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})
在上面的代码中,我们使用了request方法发送了一个post请求,将数据以json格式发送到服务器。
3. 封装优化
3.1 默认配置
在实际开发中,我们可能会多次调用同一个接口,如果每次都手动配置一遍请求的参数是非常麻烦的,所以我们可以设置一些默认参数,例如接口域名、请求方式、请求头等,这样在调用接口时只需要传入部分参数即可。
function request(options) {
const baseUrl = 'https://www.example.com/api'
const defaultOptions = {
url: '',
method: 'GET',
data: {},
header: {
'content-type': 'application/json'
}
}
options = Object.assign({}, defaultOptions, options)
options.url = baseUrl + options.url
// ...
}
在上面的代码中,我们定义了一个baseUrl常量,用来存放接口的域名。同时,我们定义了一个defaultOptions对象,其中包含了一些默认的请求参数,例如请求方式为GET、请求头为json格式。
我们使用Object.assign方法将defaultOptions和options合并,以options为主,并将合并后的结果重新赋值给options,这样我们就得到了一个完整的请求参数。
最后,我们将请求的url拼接上baseUrl,得到最终的请求地址。
3.2 错误处理
在发送网络请求时,可能会发生一些错误,例如网络不可用、请求超时等,需要对这些错误进行处理,以保证程序在出错时能够恰当地响应。
我们可以在request方法中添加一个错误处理函数,用来捕获请求过程中的错误信息,并返回对应的错误提示。例如:
function request(options) {
// ...
return new Promise((resolve, reject) => {
uni.request({
// ...
fail: err => {
uni.hideLoading() // 隐藏loading
uni.showToast({
title: '网络错误,请稍后重试',
icon: 'none'
})
reject(err)
}
})
})
}
在上面的代码中,在请求失败时,我们使用uni.hideLoading方法隐藏loading提示,并使用uni.showToast方法显示一个错误提示框,提示用户网络错误。最后,我们使用reject方法将错误信息返回。
4. 总结
通过封装uniapp的request方法,我们可以大大简化网络请求的过程,提高开发效率。在封装过程中,我们使用了promise语法、默认配置、错误处理等技术,让请求代码更加简洁、清晰、易于维护。