争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

小程序如何完成网络请求 (详细过程)

时间:2022-9-4作者:未知来源:争怎路由网人气:

微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态。

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

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

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

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

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

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

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

一、网络请求的场景分析

1、支持token传入的网络请求。

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

2、网络请求的劫持。

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

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

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

3、支持自定义loading窗的弹出和隐藏控制

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

4、对网络不同的错误,进行处理

二、代码分析

/**
 * 自定义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: {      'content-type': 'application/json'
    },
    method: 'POST',
    dataType: 'json',
    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: '/pages/recharge/recharge',
        })        return false;
      } else if (res.data.code == 1006) { //余额不足
        wx.navigateTo({
          url: '/pages/deposited/deposited',
        })        return false;
      } else if (res.data.code == 1019) { //未实名
        wx.navigateTo({
          url: '/pages/certify/certify',
        })        return false;
      } else if (res.data.code == 1001) { //token过期
        wx.reLaunch({
          url: '/pages/login/login'
        });        return false;
      } else { //失败
        let error = res.data == null   

关键词:小程序如何完成网络请求 (详细过程)




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版