WeChat アプレットでのネットワークリクエストの単純なカプセル化-ミニプログラム開発-php.cn

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

不言

リリース： 2018-06-27 14:57:06

オリジナル

2886 人が閲覧しました

この記事は、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 サイトです。