微信小程序 网络请求封装
【摘要】
封装的意义在于使用起来更高效简洁
network.js
post请求和get请求不一样的地方在于header中的content-type参数和method参数
function postR...
封装的意义在于使用起来更高效简洁
network.js
post请求和get请求不一样的地方在于header中的content-type参数和method参数
function postRequestLoading(url, params, message, success, fail) {
if (message != "") {
wx.showLoading({
title: message,
})
}
const postRequestTask = wx.request({
url: url,
data: params,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
success: function(res) {
if (message != "") {
wx.hideLoading()
}
if (res.statusCode == 200) {
success(res.data)
} else {
fail(res)
}
},
fail: function(res) {
if (message != "") {
wx.hideLoading()
}
fail(res)
}
})
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
这个参数一目了然，当message为空的时候就不显示loading，
然后wx.request返回一个一个task对象，这个对象用来取消请求。
为了更简单的调用，可以再写一个构造
function postRequest(url, params, success, fail) {
this.postRequestLoading(url, params, "", success, fail)
}
- 1
- 2
- 3
少了message 参数，在调用postRequestLoading方法的时候直接传空即可。
调用
在需要调用的js页面先导入network.js
var network = require('../../utils/network.js');
- 1
使用
//参数
var params = new Object();
params.account = e.detail.value.username,
params.password = e.detail.value.password,
network.postRequestLoading('http:....', params, '登陆中',
function (res) {
//res就是返回的数据
console.log("成功"+res)
}, function (res) {
console.log("失败"+res)
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
完整代码
/**
* url:请求的url
* params:请求参数
* message:loading提示信息
* success:成功的回调
* fail:失败的回调
*/
//post请求
function postRequest(url, params, success, fail) {
this.postRequestLoading(url, params, "", success, fail)
}
//根据判断message 是否显示loading
function postRequestLoading(url, params, message, success, fail) {
if (message != "") {
wx.showLoading({
title: message,
})
}
const postRequestTask = wx.request({
url: url,
data: params,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
success: function(res) {
if (message != "") {
wx.hideLoading()
}
if (res.statusCode == 200) {
success(res.data)
} else {
fail(res)
}
},
fail: function(res) {
if (message != "") {
wx.hideLoading()
}
fail(res)
}
})
}
//get请求
function getRequest(url, params, success, fail) {
this.getRequestLoading(url, params, "", success, fail)
}
function getRequestLoading(url, params, message, success, fail) {
if (message != "") {
wx.showLoading({
title: message,
})
}
const getRequestTask = wx.request({
url: url,
data: params,
header: {
'Content-Type': 'application/json'
},
method: 'GET',
success: function(res) {
if (message != "") {
wx.hideLoading()
}
if (res.statusCode == 200) {
success(res.data)
} else {
fail(res)
}
},
fail: function(res) {
if (message != "") {
wx.hideLoading()
}
fail(res)
}
})
}
//取消post请求
function abortPostRequest(url, params, success, fail) {
postRequestTask.abort()
}
//取消get请求
function abortGetRequest(url, params, success, fail) {
getRequestTask.abort()
}
module.exports = {
postRequest: postRequest,
postRequestLoading: postRequestLoading,
getRequest: getRequest,
getRequestLoading: getRequestLoading,
abortPostRequest: abortPostRequest,
abortGetRequest: abortGetRequest
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
文章来源: blog.csdn.net，作者：yechaoa，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/yechaoa/article/details/81236026
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）