本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于小程序如何實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求 （詳細(xì)過(guò)程），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

對(duì)于小程序而言，網(wǎng)絡(luò)請(qǐng)求封裝的要比Android強(qiáng)大多了，這一點(diǎn)值得贊揚(yáng)。官方示例：

wx.request({  url: 'test.php', //僅為示例，并非真實(shí)的接口地址  data: {     x: '' ,     y: ''  },  header: {    'content-type': 'application/json' // 默認(rèn)值  },  success: function(res) {    console.log(res.data)  }})

but…but…這調(diào)用起來(lái)貌似很簡(jiǎn)單，但是，似乎有點(diǎn)不對(duì)勁？哪兒不對(duì)勁呢——每次調(diào)用的代碼太多了。而且，對(duì)于網(wǎng)絡(luò)請(qǐng)求的日志文件不好管理。這離我們最理想的方式還是有點(diǎn)差距的。
那么，我們最理想的方式是希望是怎么樣的呢？

1、代碼簡(jiǎn)潔，一行代碼去搞定。
2、對(duì)于常用的字段統(tǒng)一封裝管理。如 token、版本號(hào)version等
3、自定義異常處理。如未登錄時(shí)，不用每寫(xiě)一個(gè)接口都去判斷是否登錄、注冊(cè)等

 api.request1(d沈陽(yáng)APP軟件
ata, function (result) { //數(shù)據(jù)請(qǐng)求成功，  }，   function（error）{//失敗 }）

那么，基于上面的問(wèn)題。我來(lái)一步步進(jìn)行剖析。

一、網(wǎng)絡(luò)請(qǐng)求的場(chǎng)景分析1、支持token傳入的網(wǎng)絡(luò)請(qǐng)求。

這種情況比較少見(jiàn)的。我現(xiàn)在的項(xiàng)目中就遇到了。大概意思是管理員可以操作旗下的其他的虛擬用戶。管理員登錄后生成一個(gè)token，每生成一個(gè)成員時(shí)，會(huì)生成一個(gè)虛擬的virtualToekn，以后每次管理員操作這個(gè)成員時(shí)，都需要用這個(gè)virtualToken，但是管理員獲取自己的信息時(shí)，還是需要用自己的token。這個(gè)時(shí)候就要支持自定義的token傳入了。

2、網(wǎng)絡(luò)請(qǐng)求的劫持。

這種場(chǎng)景主要有兩種情況：

1、如果網(wǎng)絡(luò)失敗
2、沒(méi)有token時(shí)，這種場(chǎng)景主要出現(xiàn)在登錄后置中。如商城類app查看購(gòu)物車等

解決方法：直接返回失敗，在發(fā)起網(wǎng)絡(luò)請(qǐng)求前結(jié)束本次網(wǎng)絡(luò)請(qǐng)求操作，減少預(yù)知的錯(cuò)誤網(wǎng)絡(luò)訪問(wèn)

3、支持自定義loading窗的彈出和隱藏控制

1、loading窗的彈出：這種場(chǎng)景比較多，如下拉刷新列表時(shí)，是不需要loading窗出現(xiàn)的。但是獲取用戶信息是需要loading出現(xiàn)的
2、loading窗的隱藏：這種場(chǎng)景是如果調(diào)用一個(gè)接口成功后，然后要連續(xù)調(diào)用第二個(gè)接口。這樣在第一次接口成功后，不應(yīng)該讓loading窗消失，而是最后一次接口結(jié)束后才隱藏。

4、對(duì)網(wǎng)絡(luò)不同的錯(cuò)誤，進(jìn)行處理二、代碼分析

/** * 自定義token  請(qǐng)求 *  * isShowLoading :true  彈出loading窗 * isEndLoading： true  最后需要隱藏loading窗。若是false，則不隱藏 * token: 可以自定義token。用戶虛擬賬號(hào)使用車輛 */ export function requestApi(requestData, isShowLoading = true,isEndLoading = true, token = null,onSuccess, onFail) {   let app = getApp().globalData;  // 1、檢查是否已經(jīng)登錄，在未登錄的時(shí)候，可以提前緩存一個(gè)臨時(shí)token欺騙本次檢查。等登錄完成后，再更新token值  if (!util.hasLogin()) {    return;  }  // 2、檢查網(wǎng)絡(luò)狀態(tài)  if (!util.checkNetworkConnected()) { //沒(méi)有網(wǎng)絡(luò)    onFail("網(wǎng)絡(luò)請(qǐng)求失敗，稍后再試")    return;  }  if (!requestData) {    onFail("數(shù)據(jù)異常，請(qǐng)稍后再試")    return;  }  let cacheToken =  util.takeToken()  let newToken = token == null ? cacheToken : token  console.log("newToken===========>", newToken)  requestData.token = newToken  requestData.version = app.version  console.log("==================================================開(kāi)始請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)start========================================")  console.log(requestData)  console.log("==================================================開(kāi)始請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)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("==================================================返回請(qǐng)求結(jié)果start========================================")      console.log(res.data)      console.log("==================================================返回請(qǐng)求結(jié)果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) { //未實(shí)名        wx.navigateTo({          url: '/pages/certify/certify',        })        return false;      } else if (res.data.code == 1001) { //token過(guò)期        wx.reLaunch({          url: '/pages/login/login'        });        return false;      } else { //失敗        let error = res.data == null || typeof (res.data) == "undefined" ? "網(wǎng)絡(luò)請(qǐng)求失敗，請(qǐng)稍后再試" : res.data.desc        onFail(error)        console.log("error===========>", error);      }    },    fail: function(res) {      console.log("onFail===========>", res);      onFail("網(wǎng)絡(luò)請(qǐng)求失敗，稍后再試")    },    complete: function(res) {      console.log("complete===========>", isEndLoading);            if (isEndLoading){        wx.hideLoading()      }    }  })};              
              

            
api,網(wǎng)絡(luò)請(qǐng)求