ミニ プログラムはネットワーク リクエストをどのように実装するか (詳細なプロセス)

この記事の内容は、小さなプログラムがネットワーク リクエストを実装する方法 (詳細なプロセス) についてです。必要な方は参考にしていただければ幸いです。

小規模なプログラムの場合、ネットワーク リクエストのカプセル化は Android よりもはるかに強力であり、賞賛に値します。公式例:

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

but…but…これは呼び出しが非常に簡単なようですが、何かが間違っているように思えますか?何かが間違っています - 呼び出しあたりのコードが多すぎます。さらに、ネットワーク リクエストのログ ファイルの管理は困難です。これは私たちの理想的なアプローチにはまだ少し遠いです。
それでは、私たちが望む最も理想的な方法は何でしょうか?

1. コードは簡潔で、1 行のコードで実行できます。
2. よく使用されるフィールドの統合されたカプセル化と管理。トークン、バージョン番号など。
3. カスタム例外処理。ログインしていない場合は、インターフェースを作成するたびにログインするか登録するかなどを判断する必要はありません。

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

それでは、上記の質問を踏まえてください。段階的に分析してみましょう。

1. ネットワーク リクエストのシナリオ分析

1. トークン受信ネットワーク リクエストをサポートします。

この状況は比較的まれです。現在のプロジェクトでそれに遭遇しました。これはおそらく、管理者が自分の制御下で他の仮想ユーザーを操作できることを意味します。管理者は、ログイン後にトークンを生成します。メンバーが生成されるたびに、仮想の virtualToekn が生成されます。ただし、管理者は、このメンバーを操作するたびに、この virtualToekn を使用する必要があります。ただし、管理者は、自分の情報を取得します。 、彼はまだ独自のトークンを使用する必要があります。現時点では、カスタム トークンの受信をサポートする必要があります。

2. ネットワークリクエストのハイジャック。

このシナリオには主に 2 つの状況があります。

1. ネットワークに障害が発生した場合
2. トークンがない場合、このシナリオは主にログインの後処理で発生します。たとえば、ショッピング カート アプリでショッピング カートを表示する場合などです。

解決策: 失敗を直接返し、ネットワーク リクエストを開始する前にこのネットワーク リクエスト操作を終了し、予測される誤ったネットワーク アクセスを減らします。

3 サポート。カスタマイズ ロード ウィンドウのポップアップと非表示の制御

1. ロード ウィンドウのポップアップ: たとえば、リストを更新するためにプルダウンする場合、ロード ウィンドウは必要ありません。現れる。ただし、ユーザー情報を取得するには、表示するためにロードする必要があります
2. 読み込みウィンドウを非表示にする: このシナリオは、1 つのインターフェイスが正常に呼び出され、その後 2 番目のインターフェイスが継続的に呼び出される場合です。このようにして、最初のインターフェイスが成功した後、読み込みウィンドウは消えず、最後のインターフェイスが完了した後は非表示になります。

4. さまざまなネットワーク エラーの処理

2. コード分析

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

3. ネットワーク環境の統合切り替え。

app.jsonで統一設定する

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

これにより、今後ネットワーク環境を切り替える際にデバッグ値を変更するだけで済みます。

4. セカンダリ カプセル化

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

最後に、コンソールでのログの表示の概略図は次のとおりです。

以上がミニ プログラムはネットワーク リクエストをどのように実装するか (詳細なプロセス)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。