微信小程序是腾讯公司推出的一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。微信小程序的使用非常广泛,而进行网络请求是小程序开发中非常重要的一个环节。在微信小程序中,我们通常使用wx.request接口来发起网络请求。为了方便管理、复用和维护,开发者们通常会在小程序全局设置请求地址,并对wx.request进行封装。
设置全局请求URL,主要是为了方便在小程序的任何页面或组件中都可以直接调用这个统一的URL地址。通常,我们会在小程序的app.js文件中设置全局变量。例如:
```javascript
App({
// 设置全局请求URL
globalData: {
URL: '***',
},
...
})
```
接下来,我们封装wx.request请求。封装的好处是统一管理请求参数,比如headers、dataType等,以及提供请求成功或失败的回调处理,简化页面或组件中的调用方式,提高代码的复用性。封装形式多种多样,可以根据实际需要自定义参数和回调函数,如下所示:
```javascript
/**
* 封装wx.request请求
* method:请求方式,如GET、POST等
* url: 请求地址,通常是全局URL加上具体API的相对路径
* data:要传递的参数
* callback:请求成功回调函数
* errFun:请求失败回调函数
**/
wxRequest(method, url, data, callback, errFun) {
wx.request({
url: url,
method: method,
data: data,
header: {
'content-type': method == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
dataType: 'json',
success: function(res) {
callback(res.data);
},
fail: function(err) {
errFun(err);
}
})
}
```
在封装完成之后,我们可以在小程序的页面中调用封装好的请求方法,如下:
```javascript
const app = getApp();
Page({
onLoad: function() {
let url = app.globalData.URL + '/User/getUserinfo';
let data = {
uid: '1'
};
app.wxRequest('POST', url, data, (res) => {
console.log(res.data)
}, (err) => {
console.log(err.errMsg)
});
}
});
```
从这个示例中可以看到,通过调用封装好的`app.wxRequest`方法,我们可以非常方便地发起一个POST请求,并对结果进行处理。这里使用了`getApp()`方法来获取小程序实例,然后通过实例访问我们在app.js中设置的全局URL。
需要注意的是,当请求失败时,我们可以通过回调函数`errFun`来处理错误,例如进行错误提示、记录日志等。而在请求头中设置`'content-type'`和`'Accept'`是因为不同的请求方式和服务器端的交互格式可能不同,设置合适的请求头能确保请求被正确处理。
设置全局请求URL和封装wx.request请求,是微信小程序开发中提升代码质量和开发效率的常见做法。通过封装,可以使得网络请求的代码更加模块化,更易于管理和维护,同时也让页面的其他部分更加专注于逻辑处理和界面展示,大大提高了开发效率。