微信小程序之网络请求简单封装实例详解

微信小程序网络请求的简单封装实例详解

在微信小程序中进行网络请求相对于Android来说更为简便，主要得益于微信小程序提供的丰富API。我们可以轻松地使用这些API解决网络请求问题。

微信小程序的网络请求主要涵盖以下几个方面：

1. 普通HTTPS请求（wx.request）

2. 文件上传（wx.uploadFile）

3. 文件下载（wx.downloadFile）

4. WebSocket通信（wx.connectSocket）

为了数据安全性，微信小程序只支持https进行网络请求。当我们使用wx.request时，默认的header的content-typ为application/json，而且method的值通常要求大写，但实际测试中发现小写也能成功请求。request默认的超时时间是60秒。

为了更好地控制网络请求，我们可以在app.json中设置自定义的超时时间，例如：

```json

{

"workTimeout": {

"request": 5000,

"connectSocket": 5000,

"uploadFile": 5000,

"downloadFile": 5000

}

}

```

接下来，我们可以对网络请求进行封装。网络请求可以分为两类：后台运行的无加载对话框提示的请求，以及有提示（如“正在加载数据”）的请求。为此，我们可以创建一个work的网络请求工具类，并封装相关的请求函数。

例如，展示进度条的网络请求函数可以如下：

```javascript

// 展示进度条的网络请求

// url: 网络请求的url

// params: 请求参数

// message: 进度条的提示信息

// success: 成功的回调函数

// fail: 失败的回调

function requestLoading(url, params, message, success, fail) {

console.log(params); // 输出请求参数以便调试

wx.showLoading({ // 显示加载对话框

title: message // 设置对话框提示信息

});

wx.request({ // 发起网络请求

url: url, // 请求的url地址

data: params, // 请求参数

在后台开发中，我们经常需要创建请求函数来从服务器获取数据。为了提高代码的可重用性和简洁性，我们可以创建一个通用的请求函数，这样我们就可以在不同的地方重复使用它，而无需重复编写相同的代码。接下来，我将介绍如何创建一个不显示对话框的请求函数。

我们定义一个名为`request`的函数，它接受一些参数，如URL、参数、成功和失败的回调函数等。为了简化代码，我们将复用现有的`requestLoading`函数。

```javascript

function request(url, params, successCallback, errorCallback) {

this.requestLoading(url, params, '', successCallback, errorCallback);

}

```

接下来，我们改进`requestLoading`函数，使其能够根据传入的提示信息决定是否显示加载对话框。我们还将处理网络请求的其他细节，如显示进度条、处理请求头、处理成功和失败的情况等。

```javascript

function requestLoading(url, params, message, successCallback, errorCallback) {

console.log(params); // 打印请求参数

wx.showNavigationBarLoading(); // 显示加载动画

if (message !== '') {

wx.showLoading({ title: message }); // 如果提示信息不为空，则显示加载对话框

}

wx.request({

url: url,

data: params,

header: {

'content-type': 'application/x-www-form-urlencoded' // 设置请求头

},

method: 'post', // 使用POST方法发送请求

success: function(res) {

wx.hideNavigationBarLoading(); // 隐藏加载动画

if (message !== '') {

wx.hideLoading(); // 隐藏加载对话框

}

if (res.statusCode === 200) {

successCallback(res.data); // 如果请求成功，调用成功回调函数并传入返回的数据

} else {

errorCallback(); // 如果请求失败，调用失败回调函数

}

},

fail: function(res) {

wx.hideNavigationBarLoading(); // 隐藏加载动画

if (message !== '') {

wx.hideLoading(); // 隐藏加载对话框

}

errorCallback(); // 调用失败回调函数

},

// complete函数在此处未使用，可以移除或根据需要添加其他逻辑。

});

}

```

现在，我们可以很容易地使用这个`request`函数来发送请求。例如：

```javascript

var work = require("/utils/work.js"); // 引入工具模块

getData: function() {

work.requestLoading(URL.MY_SCORE, this.data.params, '正在加载数据', function(res) {

// 处理返回的数据

console.log(res);

}, function() {

wx.showToast({ title: '加载数据失败' }); // 数据加载失败时的提示

});

}

```

希望这篇文章能帮助你更好地理解如何创建不显示对话框的请求函数。感谢阅读，请大家继续支持本站！