本文主要介绍陌陌小程序网络请求简单封装示例解读的相关信息。 有需要的同学可以参考以下
在Momo小程序中实现网络请求比Android简单得多。 我们只需要利用它提供的API就可以解决网络请求的问题。
为了数据安全手机网站封装小程序，陌陌小程序网络请求仅支持https。 其实每个参数的含义并不详细。 如果你不熟悉它，你可以； 你可以阅读官方文档network request api。 我们在使用request的时候手机网站封装小程序，header-typ的内容默认是application/json，并且文档指出method的值必须是小写，但是经过测试，大写也可以成功。 请求的默认超时时间为60s。 如果我们想自定义超时时间，可以在app.json中添加如下代码片段，分别设置请求、socket、上传文件、下载文件的超时时间。
"networkTimeout": {
"request": 5000,
"connectSocket": 5000,
"uploadFile": 5000,
"downloadFile": 5000
}
登录后复制
设置好超时时间后，我们开始封装网络请求。 我们平时接触到的网络请求通常分为两种，一种是后台运行，没有加载对话框提示，另一种是有提示的。 如果提示正在加载数据，那么我们以此为线索进行封装。首先创建一个network网络请求工具类，然后
// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail：失败的回调
function requestLoading(url, params, message, success, fail) {
console.log(params)
wx.showLoading({
title: message,
})
wx.request({
url: url,
data: params,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'post',
success: function (res) {
//console.log(res.data)
wx.hideLoading()
if (res.statusCode == 200) {
success(res.data)
} else {
fail()
}
},
fail: function (res) {
wx.hideLoading()
fail()
},
complete: function (res) {
},
})
}
登录后复制
前面的函数很容易理解。 代码中已经解释了参数的含义。 在网络请求开始之前，会弹出“正在加载”对话框，提醒用户网络当前正在请求数据。 当网络请求成功或失败时，调用wx.hideLoading()取消提示框的显示。 api中还提供了wx.showNavigationBarLoading()来显示当前页面的导航栏加载动画，所以如果我们想要显示这个动画，可以在requestLoading执行开始时调用wx.showNavigationBarLoading()，然后网络请求成功或失败然后调用wx.hideNavigationBarLoading()隐藏导航栏并加载动画。
当网络请求成功且状态码为200时，请求的数据会通过success(res.data)反弹给我们。 之前我们没有对失败的原因进行细分。 其实还可以添加这个参数，用于提示用户失败的原因。 例如当res.statusCode==500时，提示服务器内部错误； 等待。
之后我们创建一个不显示对话框的请求函数，向用户后台请求数据。 为了少写代码，我们把里面的函数共享出来，如下
//不显示对话框的请求
function request(url, params, success, fail) {
this.requestLoading(url, params, "", success, fail)
}
登录后复制
我们看到最后还是调用了requestLoading，所以我们可以在这个函数中做一个判断，如果提示信息message==''，则不会显示对话框。
最终代码
function request(url, params, success, fail) {
this.requestLoading(url, params, "", success, fail)
}
// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail：失败的回调
function requestLoading(url, params, message, success, fail) {
console.log(params)
wx.showNavigationBarLoading()
if (message != "") {
wx.showLoading({
title: message,
})
}
wx.request({
url: url,
data: params,
header: {
//'Content-Type': 'application/json'
'content-type': 'application/x-www-form-urlencoded'
},
method: 'post',
success: function (res) {
//console.log(res.data)
wx.hideNavigationBarLoading()
if (message != "") {
wx.hideLoading()
}
if (res.statusCode == 200) {
success(res.data)
} else {
fail()
}
},
fail: function (res) {
wx.hideNavigationBarLoading()
if (message != "") {
wx.hideLoading()
}
fail()
},
complete: function (res) {
},
})
}
module.exports = {
request: request,
requestLoading: requestLoading
}
登录后复制
使用起来非常简单，如下
//路径根据自己项目路径修改
var network = require("/utils/network.js")
getData:function(){
network.requestLoading(URL.MY_SCORE, that.data.params, '正在加载数据', function (res) {
//res就是我们请求接口返回的数据
console.log(res)
}, function () {
wx.showToast({
title: '加载数据失败',
})
})
}
登录后复制
