アプレット要求パッケージおよびブロッキング

通常、axiosライブラリのAPIを使用して、一般的な構成とリクエストメソッドのカプセル化を設定します.詳細については、axiosの一般的な構成とリクエストメソッドのパッケージを参照してください.ウィジェットでのwx.requestの使用  APIはネットワーク要求データを行うが、ウィジェットでは要求に対してブロックAPIは提供されていない.Taroフレームワークでは Taro.addInterceptor(callback) API ブロッキングは、リクエストの発行前または発行後に追加の操作を行うために使用できます.ここで提供されるブロッキング:要求ブロッキングと応答ブロッキングは区別されません.
一、要求パッケージ
wx.requestパラメータの説明:
ツールバーの
を選択します.
デフォルト
必須
説明
最小バージョン
url
string
 
はい
開発者サーバインタフェースアドレス
 
data
string/object/ArrayBuffer
 
いいえ
要求されたパラメータ
 
header
Object
 
いいえ
要求されたヘッダを設定し、ヘッダにReferを設定できません.content-type  デフォルトは  application/json
 
timeout
number
 
いいえ
タイムアウト時間(ミリ秒単位)
2.10.0
method
string
GET
いいえ
HTTP要求方法
 
dataType
string
json
いいえ
返されるデータフォーマット
 
responseType
string
text
いいえ
レスポンスのデータ型
1.7.0
enableHttp2
boolean
false
いいえ
http 2を開く
2.10.4
enableQuic
boolean
false
いいえ
quicを開く
2.10.4
enableCache
boolean
false
いいえ
cacheを開く
2.10.4
success
function
 
いいえ
インタフェース呼び出しに成功したコールバック関数
 
fail
function
 
いいえ
インタフェース呼び出しに失敗したコールバック関数
 
complete
function
 
いいえ
インタフェース呼び出し終了のコールバック関数(呼び出し成功、失敗は実行)
Object.methodの正当値:OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT.
通常、インタフェースリクエストは、主にPOSTリクエストとGETリクエストの2つの方法です.詳細については、Taro公式サイトのTaro.request APIを参照してください.
urlは必須パラメータであり、data、method、headerは非必須パラメータである.

class HTTP {
  request({
    url,
    data = {},
    method = 'GET',
    header = {'content-type': 'application/json'}
  }) {
    return new Promise((resolve, reject) => {
      this._request(url, resolve, reject, data, method, header)
    }).catch((reject) => {
      console.log('catch', reject)
    })
  }
}
export { HTTP }

wx.request APIをカプセル化する理由:まず、リクエスト時にリクエスト前にloadingスタイルを追加する必要があるインタフェースがあり、リクエスト結果応答時にloadingスタイルを非表示にし、インタフェースにリクエストヘッダなどを追加する必要がある場合があります.

class HTTP {
  // data    ， method     GET
  _request(url, resolve, reject, data = {}, method = 'GET', header = {'content-type': 'application/json'}) {
    let headerParam = { 
      Authorization: wx.getStorageSync("tokenInfo").token
    };
    this._show()
    Taro.request({
      url,
      method,
      data,
      header: {
        ...header,
        ...headerParam,
      },
      success: (res) => {
        wx.hideLoading()
        if (res.statusCode == 200) {
          resolve(res.data)
        } else {
          reject()
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '       !',
          icon: 'loading',
          duration: 1500
        })
        reject()
      }
    })
  }
  _show(){
    wx.showLoading({
      title: '   ',
    })
  }
}

export { HTTP }

インタフェース定義ドキュメントでは、classのextendsを使用してパッケージのリクエストメソッドを継承するだけです.

// src/servers/servers.js
import { HTTP } from '../utils/http.js'

const API = {
  login: "login/decodeUserInfo", //   
  ......
}
class MineModel extends HTTP {
  //   
  getLogin(encryptedData, iv, code){
    return this.request({
      url: API.login,
      data: {
        encryptedData,
        iv,
        code,
      },
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
    })
  }
}
export { MineModel }

どのようにページで使用しますか?

import {  MineModel } from '../../models/mine.js'

const mineModel = new MineModel()

//        
mineModel.getLogin(res.encryptedData, res.iv, code).then(res => {
  console.log('       ', res)
})

二、遮断器
呼び出し Taro.request リクエストを開始する前に呼び出す Taro.addInterceptor 方法:リクエストにブロッキングを追加し、ブロッキングの呼び出し順序はタマネギモデルに従います.
ブロッキングは関数で、受け入れます. chain オブジェクトをパラメータとして使用します.chain オブジェクトに含まれる requestParmas プロパティ.要求パラメータを表します.ブロック内で最後に呼び出す必要があります chain.proceed(requestParams) をクリックして、次のブロッキングまたはリクエストの開始を呼び出します.

// src/servers/interceptors.js
import { getNewToken } from "./servers";
const customInterceptor = (chain) => {
  const requestParams = chain.requestParams;
  return chain.proceed(requestParams).then((res) => {
    console.log(`http 

たとえばtokenの期限切れ、リクエストサーバの異常などの問題があります.
Taro 内蔵ブロッキングは2つ用意されています logInterceptor と timeoutInterceptorは、要求に関する情報を印刷し、要求がタイムアウトしたときにエラーを投げ出すために使用されます.

Taro.addInterceptor(Taro.interceptors.logInterceptor)
Taro.addInterceptor(Taro.interceptors.timeoutInterceptor)
Taro.request({ url })

もちろん、ブロックを配列に配置することができます.コードは次のとおりです.

const interceptors = [customInterceptor, Taro.interceptors.logInterceptor];

export default interceptors;

ロード要求方式では、forEachを使用してブロッキングの各項目を循環的に追加します.