ネットワークリクエストを単純にカプセル化するための WeChat アプレットコードの例

この記事は、WeChat ミニ プログラムのネットワーク リクエストの単純なカプセル化の例に関する関連情報を主に紹介します。必要な友達は参照してください

WeChat ミニ プログラムのネットワーク リクエストの単純なカプセル化の例について詳しく説明します

WeChat ミニ プログラムのネットワーク リクエストは Android よりもはるかに簡単に感じられます。ネットワーク リクエストの問題を解決するには、それが提供する API を使用するだけで済みます。

• 通常のHTTPSリクエスト(wx.request)

• アップロードファイル(wx.uploadFile)

• ダウンロードファイル(wx.downloadFile)

• WebSocket通信(wx.connectSocket)
  

データのセキュリティのため、WeChat アプレットのネットワーク リクエストは https のみをサポートします。もちろん、各パラメータの意味については詳しく説明しません。詳しくは、公式ドキュメントのネットワーク リクエスト API を参照してください。 request を使用する場合、ヘッダーのデフォルトの content-type は application/json です。メソッドの値は大文字である必要があることがドキュメントで指摘されていますが、テスト後、リクエストは小文字でも成功する可能性があります。リクエストのデフォルトのタイムアウトは 60 秒です。タイムアウトをカスタマイズしたい場合は、次のコード スニペットを app.json に追加して、リクエスト、ソケット、アップロードされたファイルとダウンロードされたファイルのタイムアウトをそれぞれ設定できます。

"networkTimeout": {
  "request": 5000,
  "connectSocket": 5000,
  "uploadFile": 5000,
  "downloadFile": 5000
 }

タイムアウトを設定した後、通常接触するネットワーク リクエストは 2 つのカテゴリに分類されます。1 つはダイアログ ボックス プロンプトを読み込まずにバックグラウンドで実行されるものです。データがロードされているというプロンプトなどのプロンプトがある場合は、これをカプセル化するための手がかりとして使用します。まずネットワークのネットワーク リクエスト ツール クラスを作成し、次に

// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail：失败的回调
function requestLoading(url, params, message, success, fail) {
 console.log(params)
  wx.showLoading({
   title: message,
  })
 wx.request({
  url: url,
  data: params,
  header: {
   'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'post',
  success: function (res) {
   //console.log(res.data)
    wx.hideLoading()
   if (res.statusCode == 200) {
    success(res.data)
   } else {
    fail()
   }

  },
  fail: function (res) {
    wx.hideLoading()
    fail()
  },
  complete: function (res) {

  },
 })
}

パラメータの意味はコードで説明されているため、ネットワーク リクエストが開始される前に [読み込み中] ダイアログ ボックスが表示されます。現在のネットワークがデータを要求していることをユーザーにプロンプ​​トするために表示されます。ネットワーク要求が成功または失敗したときに、wx.hideLoading() を呼び出してプロンプト ボックスの表示をキャンセルします。この API は、現在のページのナビゲーション バー読み込みアニメーションを表示するための wx.showNavigationBarLoading() も提供します。このアニメーションを表示したい場合は、requestLoading の実行の開始時に wx.showNavigationBarLoading() を呼び出し、その後でそれを呼び出すことができます。ネットワークリクエストが成功するか失敗するか。 wx.hideNavigationBarLoading() はナビゲーションバーの読み込みアニメーションを非表示にします。

ネットワーク リクエストが成功し、ステータス コードが 200 の場合、リクエストされたデータは success(res.data) を通じてメソッドにコールバックされます。 もちろん、上記の失敗の理由を分析することはできません。また、失敗のコールバックを追加します。たとえば、res.statusCode ==500 の場合、内部サーバー エラーが表示されます。 res.statusCode ==404、アドレスが見つかりませんなどを確認してください。

次に、ダイアログボックスを表示せず、ユーザーのバックグラウンドからデータを要求するリクエスト関数を作成します。コードの記述を減らすために、次のように上記の関数を共有します

//不显示对话框的请求
function request(url, params, success, fail) {
 this.requestLoading(url, params, "", success, fail)
}

。最後に requestLoading を呼び出し、プロンプトメッセージ message=='' が表示された場合、ダイアログボックスは表示されません。

最終的なコード

function request(url, params, success, fail) {
 this.requestLoading(url, params, "", success, fail)
}
// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail：失败的回调
function requestLoading(url, params, message, success, fail) {
 console.log(params)
 wx.showNavigationBarLoading()
 if (message != "") {
  wx.showLoading({
   title: message,
  })
 }
 wx.request({
  url: url,
  data: params,
  header: {
   //'Content-Type': 'application/json'
   'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'post',
  success: function (res) {
   //console.log(res.data)
   wx.hideNavigationBarLoading()
   if (message != "") {
    wx.hideLoading()
   }
   if (res.statusCode == 200) {
    success(res.data)
   } else {
    fail()
   }

  },
  fail: function (res) {
   wx.hideNavigationBarLoading()
   if (message != "") {
    wx.hideLoading()
   }
   fail()
  },
  complete: function (res) {

  },
 })
}
module.exports = {
 request: request,
 requestLoading: requestLoading
}

は、次のように非常に簡単です

//路径根据自己项目路径修改
var network = require("/utils/network.js")
getData:function(){
  network.requestLoading(URL.MY_SCORE, that.data.params, '正在加载数据', function (res) {
  //res就是我们请求接口返回的数据
   console.log(res)
  }, function () {
   wx.showToast({
    title: '加载数据失败',
   })
  })
}

以上がネットワークリクエストを単純にカプセル化するための WeChat アプレットコードの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。