Wie können native Miniprogramme Anfragen und Aufrufschnittstellen elegant kapseln?

Wie kapselt das WeChat-Applet native Anfragen? Wie rufe ich die Schnittstelle auf? Der folgende Artikel stellt Ihnen die Methode zum Kapseln von Anfragen im nativen WeChat-Applet und zum eleganten Aufrufen von Schnittstellen vor. Ich hoffe, er wird Ihnen hilfreich sein!

Bei diesem Artikel handelt es sich um einen Codeausschnitt, der native WeChat-Applet-Anfragen kapselt. Ich habe persönliche Schreibgewohnheiten, nur als Referenz.

Basierend auf Native Mini-Programm-AnfrageAnfragen im Promise-Stil kapseln
Mehrstufige Rückrufe vermeiden (Rückrufhölle)
Einheitliche Verarbeitung und Verteilung von Netzwerkanforderungsfehlern

Verzeichnisstruktur

.
├── api
│   ├── config.js // 相关请求的配置项,请求api等
│   ├── env.js // 环境配置
│   ├── request.js  // 封装主函数
│   ├── statusCode.js // 状态码
└── ...

Zugehöriger Code

Konfigurationsdatei

env. js

// env.js
module.exports = {
  ENV: 'production',
  // ENV: 'test'
}

statusCode.js

// statusCode.js
// 配置一些常见的请求状态码
module.exports = {
  SUCCESS: 200,
  EXPIRE: 403
}

config.js

// config.js
const { ENV } = require('./env')
let BASEURL

switch (ENV) {
  case 'production':
    BASEURL = ''
    break
  case 'test':
    BASEURL = ''
    break
  default:
    BASEURL = ''
    break
}
module.exports = {
  BASEURL,// 项目接口地址，支持多域名
}

Hauptfunktion

Hinweis Die Zeilen 64 bis 68 dienen zur Verarbeitung des Token-Ablaufs. Überprüfen Sie beim Aufruf von login, ob das Token in app.globalData vorhanden ist. Wenn das Token abläuft und das Token gelöscht wird, wird die Anmeldeanforderung gesendet wird bei der nächsten Anfrage erneut gestartet. Dadurch wird das neue Token erneut abgerufen.

// 引入状态码statusCode
const statusCode = require('./statusCode')
// 定义请求路径, BASEURL: 普通请求API; CBASEURL: 中台API,不使用中台可不引入CBASEURL
const { BASEURL } = require('./config')
// 定义默认参数
const defaultOptions = {
  data: {},
  ignoreToken: false,
  form: false,
}
/**
 * 发送请求
 * @params
 * method: <String> 请求方式: POST/GET
 * url: <String> 请求路径
 * data: <Object> 请求参数
 * ignoreToken: <Boolean> 是否忽略token验证
 * form: <Boolean> 是否使用formData请求
 */
function request (options) {
  let _options = Object.assign(defaultOptions, options)
  let { method, url, data, ignoreToken, form } = _options
  const app = getApp()
  // 设置请求头
  let header = {}
  if (form) {
    header = {
      &#39;content-type&#39;: &#39;application/x-www-form-urlencoded&#39;
    }
  } else {
    header = {
      &#39;content-type&#39;: &#39;application/json&#39; //自定义请求头信息
    }
  }
  if (!ignoreToken) {
    // 从全局变量中获取token
    let token = app.globalData.token
    header.Authorization = `Bearer ${token}`
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASEURL + url,
      data,
      header,
      method,
      success: (res) => {
        let { statusCode: code } = res
        if (code === statusCode.SUCCESS) {
          if (res.data.code !== 0) {
            // 统一处理请求错误
            showToast(res.data.errorMsg)
            reject(res.data)
            return
          }
          resolve(res.data)
        } else if (code === statusCode.EXPIRE) {
          app.globalData.token = &#39;&#39;
          showToast(`登录过期, 请重新刷新页面`)
          reject(res.data)
        } else {
          showToast(`请求错误${url}, CODE: ${code}`)
          reject(res.data)
        }
      },
      fail: (err) => {
        console.log(&#39;%c err&#39;, &#39;color: red;font-weight: bold&#39;, err)
        showToast(err.errMsg)
        reject(err)
      }
    })
  })
}

// 封装toast函数
function showToast (title, icon=&#39;none&#39;, duration=2500, mask=false) {
  wx.showToast({
    title: title || &#39;&#39;,
    icon,
    duration,
    mask
  });
}

function get (options) {
  return request({
    method: &#39;GET&#39;,
    ...options
  })
}

function post (options) {
  // url, data = {}, ignoreToken, form
  return request({
    method: &#39;POST&#39;,
    ...options
  })
}

module.exports = {
  request, get, post
}

api/index.js (einheitliche Schnittstellenverteilungsverarbeitung, um zu verhindern, dass die Schnittstelle zu ausführlich ist, wenn sie in dieselbe Datei geschrieben wird)

Die Verzeichnisstruktur ist wie folgt:

.
├── api
│   ├── config.js // 相关请求的配置项,请求api等
│   ├── index.js  // 统一处理入口
│   ├── order.js  // 订单接口
│   ├── request.js  // 封装主函数
│   ├── statusCode.js // 状态码
└── ...

Einführung der Anfrage

// order.js
const request = require('./request')

module.exports = {
  // data可以传入 url, data, ignoreToken, form, cToken
  apiName (data) {
    let url = 'apiUrl'
    return request.post({ url, data })
  }
}

Einheitliche Verteilungsschnittstelle

const orderApi = require("./order")

module.exports = {
  orderApi
}

Seitenreferenz

const { orderApi } = require('dir/path/api/index')
...
1. `Promise.then()`链式调用
func () {
  orderApi.apiName(params).then(res => {
    // do Something
  }).catch(err => {
    // do Something
  })
}

2. `async/await` 调用
async func () {
  try {
    let res = await orderApi.apiName(params)
    // do Something
  } catch (err) {
    // do Something
  }
}

OptionswertStandardwertapi/index.js(接口分发统一处理,防止接口写到同一个文件下过于冗长)
目录结构如下:rrreee

引入request

rrreee

统一分发接口

rrreee

页面引用

rrreee

options取值

Parameter	Beschreibung	Datentyp

参数	说明	数据类型	默认值
url	接口名	String	''
data	请求体	Object	{}
ignoreToken	请求是否携带token	Boolean	false
form	是否是表单请求	Boolean	false
url	Schnittstellenname
String
''

Daten AnfragetextObjekt {}🎜🎜 ignoreToken🎜Ob die Anfrage ein Token trägt🎜 Boolean code>🎜<td> <code>false🎜🎜 form🎜 Ob Es handelt sich um eine Formularanforderung🎜 Boolean🎜 false🎜🎜🎜🎜🎜【Verwandte Lernempfehlungen: 🎜Mini-Tutorial zur Programmentwicklung🎜】🎜

Das obige ist der detaillierte Inhalt vonWie können native Miniprogramme Anfragen und Aufrufschnittstellen elegant kapseln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!