微信ウィジェットwx.requestの簡単なパッケージ

2988 ワード

前言
以前は小さなプログラムを書いていましたが、バックグラウンドを要求するたびにオリジナルのAPIを直接呼び出し、wx.request、url、data、コールバック関数などを書く必要がありました.ちょうどこの間、小さなプログラム項目に新しい内容を追加する必要がありました.この機会に、パッケージの要求ツールを作るのは簡単です. , —— 客官可移歩小站看本文http://fanjiajia.cn/2019/07/06/wxxcx/flx1/
オリジナルAPI
まず原生のapiを見て、wx.requestは次のように書く必要があります.
wx.request({
      url: '', // url  
      //   
      data:{ 

      },
      method:'', // post || get
      success: res=> {
      //         ,res     

      },
      fail:res=> {
        //         ,res     
      }
    })

ネットワークリクエストのたびにこれらの内容を書く必要がありますが、実際のプロジェクトではurlがベースアドレス+リクエストモジュールで構成されていることが多いです.https://woshigecainiao.com/myservice/loginを選択します.https://woshigecainiao.com/myservice/、モジュールは/loginです.ベースアドレスは一般的に変わらないが、methodも通常約束されており、一律postやgetなど、failコールバックは一般的に統一的に処理されるため、パラメータdataとリクエスト成功後の処理が異なる.
インプリメンテーション
utilディレクトリの下にNetAPI.jsを新規作成する
const config = require ("../config.js") //      
const request = (url, data, showLoading) => {
  let _url = config.baseurl + url;
  return new Promise((resolve, reject)=> {
    //                  
    if (showLoading){
      wx.showLoading({
        title: '   ',
        mask: true
      })
    }
    wx.request({
      url: _url,
      method: 'post',
      data: data,
      success(res) {
        // console.error(res)
        wx.hideLoading();
        resolve(res.data)
      },
      fail(err) {
        console.error('      ',err)
        wx.hideLoading();
        wx.showModal({
          title: '  ',
          content: '      ',
          showCancel: false
        })
      }
    })
  })
}
module.exports = {
  //          NetAPI.VehicleResManager(data).then(...),     showLoading    ,       ,   false,          ,js       ,     
  VehicleResManager: (data, showLoading) => { 
    return request(config.CLYYQuery, data, showLoading == undefined ? true : showLoading)
  }
}

ここではconfig.jsファイルを導入し、バックグラウンドサーバのipやバックグラウンドリクエストベースアドレスやリクエストモジュールアドレスなどを構成し、統合管理が容易になり、configで構成するだけで、NetAPIで呼び出すことができ、NetAPIでは具体的なurlに関心がありません.
const request = (url, data, showLoading) => {...}
  • url:loginなどのバックグラウンドの異なるモジュールのエントリ
  • data:要求に必要なパラメータdata
  • showLoading:ネットワーク要求を開始するには、ロードダイアログボックスを表示する必要があるかどうかの制御スイッチを私の例として、私は最後にVehicleResManager、すなわち車両予約管理モジュールを暴露し、バックグラウンドモジュールアドレスアンインストールconfig中のconfig.CLYYQueryに対応し、pageのjsでは露出した関連エントリを簡単に呼び出すだけでよい.呼び出しは、あるpageでツール
  • に最初にインポートする.
    const NetAPI = require('../../utils/NetAPI.js')

    呼び出し先:
    NetAPI.VehicleResManager(data, that.data.curPage == 0).then(res => {...}

    resは、ツールにおいてresolve(res.data)において直接返されるのが戻り体のdata部分であるため、戻りデータを要求するものであり、ネットワーク状態などは含まれない.
    ここでPromiseについてはお話ししません
    最後に
    こちらこそ
    転載先:https://www.cnblogs.com/numen-fan/p/11143068.html