小程序如何实现网络请求 （详细过程）

本篇文章给大家带来的内容是关于小程序如何实现网络请求 （详细过程），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

对于小程序而言，网络请求封装的要比android强大多了，这一点值得赞扬。官方示例：

wx.request({
 url: #39;test.php #39;, //仅为示例，并非真实的接口地址
 data: {
 x: #39; #39; ,
 y: #39; #39;
 }, header: { #39;content-type #39;: #39;application/json #39; // 默认值
 success: function(res) {
 console.log(res.data)
})

but…but…这调用起来貌似很简单，但是，似乎有点不对劲？哪儿不对劲呢——每次调用的代码太多了。而且，对于网络请求的日志文件不好管理。这离我们最理想的方式还是有点差距的。
那么，我们最理想的方式是希望是怎么样的呢？

1、代码简洁，一行代码去搞定。
2、对于常用的字段统一封装管理。如 token、版本号version等
3、自定义异常处理。如未登录时，不用每写一个接口都去判断是否登录、注册等

 api.request1(data, function (result) { //数据请求成功，
 }， function（error）{//失败
 }）

那么，基于上面的问题。我来一步步进行剖析。

这种情况比较少见的。我现在的项目中就遇到了。大概意思是管理员可以操作旗下的其他的虚拟用户。管理员登录后生成一个token，每生成一个成员时，会生成一个虚拟的virtualToekn，以后每次管理员操作这个成员时，都需要用这个virtualToken，但是管理员获取自己的信息时，还是需要用自己的token。这个时候就要支持自定义的token传入了。

这种场景主要有两种情况：

1、如果网络失败
2、没有token时，这种场景主要出现在登录后置中。如商城类app查看购物车等

解决方法：直接返回失败，在发起网络请求前结束本次网络请求操作，减少预知的错误网络访问

1、loading窗的弹出：这种场景比较多，如下拉刷新列表时，是不需要loading窗出现的。但是获取用户信息是需要loading出现的
2、loading窗的隐藏：这种场景是如果调用一个接口成功后，然后要连续调用第二个接口。这样在第一次接口成功后，不应该让loading窗消失，而是最后一次接口结束后才隐藏。

/**
 * 自定义token 请求
 * isShowLoading :true 弹出loading窗
 * isEndLoading： true 最后需要隐藏loading窗。若是false，则不隐藏
 * token: 可以自定义token。用户虚拟账号使用车辆
 export function requestApi(requestData, isShowLoading = true,isEndLoading = true, token = null,onSuccess, onFail) { 
 let app = getApp().globalData; // 1、检查是否已经登录，在未登录的时候，可以提前缓存一个临时token欺骗本次检查。等登录完成后，再更新token值
 if (!util.hasLogin()) { return;
 } // 2、检查网络状态
 if (!util.checkNetworkConnected()) { //没有网络
 onFail( 网络请求失败，稍后再试 ) return;
 } if (!requestData) {
 onFail( 数据异常，请稍后再试 ) return;
 } let cacheToken = util.takeToken() let newToken = token == null ? cacheToken : token
 console.log( newToken=========== , newToken)
 requestData.token = newToken
 requestData.version = app.version
 console.log( ==================================================开始请求网络数据start======================================== )
 console.log(requestData)
 console.log( ==================================================开始请求网络数据end=========================================== ) var baseUrl = app.debug ? app.debugUrl : app.releaseUrl 
 console.log( ===baseUrl=== + baseUrl) if (isShowLoading){
 util.showLoading( 加载中 )
 const requestTask = wx.request({
 url: baseUrl, data: requestData, header: { #39;content-type #39;: #39;application/json #39;
 method: #39;POST #39;,
 dataType: #39;json #39;,
 success: function(res) {
 console.log( ==================================================返回请求结果start======================================== )
 console.log(res.data)
 console.log( ==================================================返回请求结果end=========================================== ) 
 if (res.data.code == 0) { //成功
 // console.log( onSuccess=========== , onSuccess);
 onSuccess(res.data)
 } else if (res.data.code == 1021) { //未缴纳押金
 wx.navigateTo({
 url: #39;/pages/recharge/recharge #39;,
 }) return false;
 } else if (res.data.code == 1006) { //余额不足
 wx.navigateTo({
 url: #39;/pages/deposited/deposited #39;,
 }) return false;
 } else if (res.data.code == 1019) { //未实名
 wx.navigateTo({
 url: #39;/pages/certify/certify #39;,
 }) return false;
 } else if (res.data.code == 1001) { //token过期
 wx.reLaunch({
 url: #39;/pages/login/login #39;
 }); return false;
 } else { //失败
 let error = res.data == null || typeof (res.data) == undefined ? 网络请求失败，请稍后再试 : res.data.desc
 onFail(error)
 console.log( error=========== , error);
 fail: function(res) {
 console.log( onFail=========== , res);
 onFail( 网络请求失败，稍后再试 )
 complete: function(res) {
 console.log( complete=========== , isEndLoading); 
 if (isEndLoading){
 wx.hideLoading()
};

在app.json中统一配置

 // 全局的数据，可以提供给所有的page页面使用
 globalData: {
 token: ,
 version: version版本号 ,
 releaseUrl: 正式版url ,
 debugUrl: 测试版url , debug: true //true debug环境，false正式环境
 },

这样，以后切换网络环境只需要修改debug值即可。

/**
 * 自定义loading 框请求
 * isShowLoading :true 弹出loading窗
 * isEndLoading： true 最后需要隐藏loading窗。若是false，则不隐藏
 export function request(requestData, isShowLoading = true, isEndLoading = true, onSuccess, onFail){ 
 this.requestApi(requestData, isShowLoading, isEndLoading, null, function (result) {
 onSuccess(result)
 }, function (error) {
 onFail(error)
 * 带有loading 框的 不能自定义的请求
 */export function request1(requestData, onSuccess, onFail) { // console.log( onSuccess========request1=== , success, fail);
 requestApi(requestData, true, true, null, function (result) {
 onSuccess(result)
 }, function (error) {
 onFail(error)
 * 自定义token 请求
 * isShowLoading :true 弹出loading窗
 * isEndLoading： true 最后需要隐藏loading窗。若是false，则不隐藏
 * token: 可以自定义token。用户虚拟账号使用车辆
 */export function request2(requestData, isShowLoading = true, isEndLoading = true, token = null, onSuccess, onFail) {
 requestApi(requestData, isShowLoading, isEndLoading, token, function (result) {
 onSuccess(result)
 }, function (error) {
 onFail(error)
 * 自定义loading 框请求
 * isShowLoading :true 弹出loading窗
 * isEndLoading： true 最后需要隐藏loading窗。若是false，则不隐藏
 */export function request3(requestData, isShowLoading = true, isEndLoading = true, token, onSuccess, onFail) {
 requestApi(requestData, isShowLoading, isEndLoading, token, function (result) {
 onSuccess(result)
 }, function (error) {
 onFail(error)
}

最后，控制台查看日志的示意图为：

以上就是小程序如何实现网络请求 （详细过程）的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。