微信小程序 网络请求封装
微信小程序 网络请求封装
yechaoa
发布于 2022-06-10 12:59:28
发布于 2022-06-10 12:59:28
代码可运行
运行总次数：0
代码可运行
封装的意义在于使用起来更高效简洁
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)
}
})
}这个参数一目了然，当message为空的时候就不显示loading，
然后wx.request返回一个一个task对象，这个对象用来取消请求。
为了更简单的调用，可以再写一个构造
function postRequest(url, params, success, fail) {
this.postRequestLoading(url, params, "", success, fail)
}少了message 参数，在调用postRequestLoading方法的时候直接传空即可。
调用
在需要调用的js页面先导入network.js
var network = require('../../utils/network.js');使用
//参数
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)
})完整代码
/**
* 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
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-07-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
