全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[北京seo营销公司]小程序如何实现网络请求 (详细过程)

  

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

  
 

  


  对于小程序而言,网络请求封装的要比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窗。[北京seo营销公司]若是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 

 

   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值即可。18 2018.11 在线教育培训课程解决方案 在线课程下单支付后可观看课程,适用于职业教育、技能培训、网络课堂等在线课程领域的解决方案 课程类别: 按课程类别展示课程,课程类别可设置视频课程、音频课程、图文课程

  

四、二次封装

/**
 * 自定义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)
 })
}

end

 

  最后▼☆★,控制台查看日志的示意图为:
 

  以上就是小程序如何实现网络请求 (详细过程)的详细内容,更多请关注久澳传媒编程栏目其它相关文章■…○!

[北京seo营销公司]小程序如何实现网络请求 (详细过程)

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。