【ウィジェットtaroベストプラクティス】httpリクエストパッケージ(使いやすく、tokenを増やし、エラーログの記録とレポートを統一)

オリジナル記事、作者:stark、転載する場合は、出典を明記してください.https://shudong.wang/10231.html
みんなに構想を提供して、参考にすることができて、どんな問題が伝言を残すことができます
taro足場の後ろの文章はゆっくりともっとテクニックを説明します
https://github.com/wsdo/taro-...
なぜカプセル化するのか
私たちが小さなプログラムを開発するとき、httpリクエストをよく使います.もちろん公式にリクエストのインタフェースが提供されていますが、リクエストするたびにtokenが加わる可能性があります.リクエストするたびに加算されます.カプセル化しないと、かなり面倒になりますが、どうやってカプセル化しますか.
とくせい

暴露get方法

曝露post法

postカスタムcontentType

プロファイル

を追加

token定義

判断状態を追加する、異常情報

を記録する.

異常エラーlogErrorログ

を追加

統合ログレポートを追加

デザイン
外部露出インタフェースが必要:get post
パラメータ:url、転送されたデータ、リクエストヘッダ
これで便利に使えます
新しいapiを/service/で作成します.js
基本オプションメソッド

baseOptions(params, method = 'GET') {
    let { url, data } = params
    let contentType = 'application/x-www-form-urlencoded'
    contentType = params.contentType || contentType
    const option = {
      isShowLoading: false,
      url: base + url,
      data: data,
      method: method,
      header: { 'content-type': contentType, 'token': token }, //   contentType ,  token
      success(res) {

      },
      error(e) {
        logError('api', '        ', e)
      }
    }
    return Taro.request(option)
  },

getメソッド

  get(url, data = '') {
    let option = { url, data }
    return this.baseOptions(option)
  },

义齿
ContentTypeの異なるバックエンドフレームワークを追加すると、異なるリクエストヘッダが要求されます.

  post: function (url, data, contentType) {
    let params = { url, data, contentType }
    return this.baseOptions(params, 'POST')
  }

これでactionで使いやすくなります

import api from '../service/api'
api.get('news/list', params)

判定状態を追加

export const HTTP_STATUS = {
  SUCCESS: 200,
  CLIENT_ERROR: 400,
  AUTHENTICATE: 401,
  FORBIDDEN: 403,
  NOT_FOUND: 404,
  SERVER_ERROR: 500,
  BAD_GATEWAY: 502,
  SERVICE_UNAVAILABLE: 503,
  GATEWAY_TIMEOUT: 504
}

コンフィギュレーション

export const base = "https://api.github.com/repos/"

異常エラーlogErrorログの追加

export const logError = (name, action, info) => {
  if (!info) {
    info = 'empty'
  }
  try {
    let deviceInfo = wx.getSystemInfoSync() //      taro 
    var device = JSON.stringify(deviceInfo)
  } catch (e) {
    console.error('not support getSystemInfoSync api', err.message)
  }
  let time = formatTime(new Date())
  console.error(time, name, action, info, device)
  //                
  // if (typeof action !== 'object') {
  // fundebug.notify(name, action, info)
  // }
  // fundebug.notifyError(info, { name, action, device, time })
  if (typeof info === 'object') {
    info = JSON.stringify(info)
  }

組み合わせて使用

import { HTTP_STATUS } from '../const/status'
import { base } from './config'
import { logError } from '../utils'

  baseOptions(params, method = 'GET') {
    let { url, data } = params
    // let token = getApp().globalData.token
    // if (!token) login()
    console.log('params', params)
    let contentType = 'application/x-www-form-urlencoded'
    contentType = params.contentType || contentType
    const option = {
      isShowLoading: false,
      loadingText: '    ',
      url: base + url,
      data: data,
      method: method,
      header: { 'content-type': contentType, 'token': token },
      success(res) {
        if (res.statusCode === HTTP_STATUS.NOT_FOUND) {
          return logError('api', '       ')
        } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) {
          return logError('api', '        ')
        } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) {
          return logError('api', '      ')
        } else if (res.statusCode === HTTP_STATUS.SUCCESS) {
          return res.data
        }
      },
      error(e) {
        logError('api', '        ', e)
      }
    }
    return Taro.request(option)
  },

最終バージョン

import Taro from '@tarojs/taro'
import { HTTP_STATUS } from '../const/status'
import { base } from './config'
import { logError } from '../utils'

const token = ''

export default {
  baseOptions(params, method = 'GET') {
    let { url, data } = params
    // let token = getApp().globalData.token
    // if (!token) login()
    console.log('params', params)
    let contentType = 'application/x-www-form-urlencoded'
    contentType = params.contentType || contentType
    const option = {
      isShowLoading: false,
      loadingText: '    ',
      url: base + url,
      data: data,
      method: method,
      header: { 'content-type': contentType, 'token': token },
      success(res) {
        if (res.statusCode === HTTP_STATUS.NOT_FOUND) {
          return logError('api', '       ')
        } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) {
          return logError('api', '        ')
        } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) {
          return logError('api', '      ')
        } else if (res.statusCode === HTTP_STATUS.SUCCESS) {
          return res.data
        }
      },
      error(e) {
        logError('api', '        ', e)
      }
    }
    return Taro.request(option)
  },
  get(url, data = '') {
    let option = { url, data }
    return this.baseOptions(option)
  },
  post: function (url, data, contentType) {
    let params = { url, data, contentType }
    return this.baseOptions(params, 'POST')
  }
}

すべてのコード
starを手伝ってくれれば
https://github.com/wsdo/taro-...
プロジェクトディレクトリ
友達を作る