Comment les mini-programmes natifs peuvent-ils encapsuler les requêtes et appeler les interfaces avec élégance ?

Comment l'applet WeChat encapsule-t-elle les requêtes natives ? Comment appeler l'interface ? L'article suivant vous présentera la méthode d'encapsulation des requêtes dans l'applet WeChat natif et d'appel des interfaces avec élégance. J'espère que cela vous sera utile !

Cet article est un extrait de code qui encapsule les requêtes d'applet WeChat natives. J'ai des habitudes d'écriture personnelles, juste pour référence.

Basé sur la Requête native du mini programmeEncapsuler les requêtes de style Promise
Éviter les rappels à plusieurs niveaux (l'enfer des rappels)
Traitement et distribution unifiés des erreurs de requête réseau

Structure des répertoires

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

Code associé

Fichier de configuration

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,// 项目接口地址，支持多域名
}

fonction principale

note Les lignes 64 à 68 concernent le traitement de l'expiration du jeton. Lors de l'appel de la connexion, vérifiez si le jeton existe dans app.globalData. S'il existe, aucune demande de connexion ne sera lancée. Si le jeton expire et que le jeton est effacé, la demande de connexion est lancée. sera réinitialisé à la prochaine requête. Cela permettra d'obtenir à nouveau le nouveau token

// 引入状态码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
}

Usage

Créer un nouveau fichier

Créer un nouveau fichier API (ici, prendre l'interface de commande comme exemple), créer un nouveau api/index.js (traitement de distribution d'interface unifié pour éviter que l'interface ne soit trop verbeuse lorsqu'elle est écrite dans le même fichier)api/index.js(接口分发统一处理,防止接口写到同一个文件下过于冗长)
目录结构如下:

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

引入request

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

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

统一分发接口

const orderApi = require("./order")

module.exports = {
  orderApi
}

页面引用

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
  }
}

options取值

rrreee

Introduction de la requête

rrreee

Interface de distribution unifiée

rrreee

Référence de page

参数	说明	数据类型	默认值
url	接口名	String	''
data	请求体	Object	{}
ignoreToken	请求是否携带token	Boolean	false
form	是否是表单请求	Boolean	falseLa structure des répertoires est la suivante :

rrreee

valeur des options

Paramètre	Description	Type de données th>	Valeur par défaut
url	Nom de l'interface	Chaîne🎜	''🎜🎜
données🎜	Corps de la requête🎜Objet🎜	{}🎜🎜	ignoreToken🎜	Si la requête contient un jeton🎜	Boolean code>🎜<td> <code>false🎜🎜
form🎜Qu'il s'agisse d'une demande de formulaire🎜	Booléen🎜	false🎜🎜🎜🎜🎜【Recommandations d'apprentissage associées : 🎜Tutoriel de développement de mini-programmes🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!