WeChat アプレットでのネットワーク リクエストの単純なカプセル化

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

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

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

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

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

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

• WebSocket通信(wx.connectSocket)
  

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

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

タイムアウトを設定した後、通常接触するネットワーク リクエストは 2 つのカテゴリに分類されます。1 つはダイアログ ボックスを読み込まずにバックグラウンドで実行されるものです。 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 を呼び出します。その後、この関数で判断できます。メッセージ =='' が表示された場合、ダイアログ ボックスは表示されません。

最終的なコード

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: '加载数据失败',
   })
  })
}

上記はこの記事の全内容です、皆さんの学習に役立つことを願っています、お支払いください関連コンテンツをもっと見るには、PHP に注目してください。中国の Web サイトです。

関連する推奨事項:

WeChat ミニ プログラムによる Web ページ コンテンツの分析の概要

WeChat ミニ プログラムのフレームの分析について

WeChat ミニ プログラムのリクエスト インターフェイスのカプセル化の概要

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