如何封装uniapp的request

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语法、默认配置、错误处理等技术,让请求代码更加简洁、清晰、易于维护。