Maison > Article > Applet WeChat > 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 !
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
. ├── api │ ├── config.js // 相关请求的配置项,请求api等 │ ├── env.js // 环境配置 │ ├── request.js // 封装主函数 │ ├── statusCode.js // 状态码 └── ...
// env.js module.exports = { ENV: 'production', // ENV: 'test' }
// statusCode.js // 配置一些常见的请求状态码 module.exports = { SUCCESS: 200, EXPIRE: 403 }
// config.js const { ENV } = require('./env') let BASEURL switch (ENV) { case 'production': BASEURL = '' break case 'test': BASEURL = '' break default: BASEURL = '' break } module.exports = { BASEURL,// 项目接口地址,支持多域名 }
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 = { 'content-type': 'application/x-www-form-urlencoded' } } else { header = { 'content-type': 'application/json' //自定义请求头信息 } } 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 = '' showToast(`登录过期, 请重新刷新页面`) reject(res.data) } else { showToast(`请求错误${url}, CODE: ${code}`) reject(res.data) } }, fail: (err) => { console.log('%c err', 'color: red;font-weight: bold', err) showToast(err.errMsg) reject(err) } }) }) } // 封装toast函数 function showToast (title, icon='none', duration=2500, mask=false) { wx.showToast({ title: title || '', icon, duration, mask }); } function get (options) { return request({ method: 'GET', ...options }) } function post (options) { // url, data = {}, ignoreToken, form return request({ method: 'POST', ...options }) } module.exports = { request, get, post }
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 // 状态码 └── ...
// 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 } }
参数 | 说明 | 数据类型 | 默认值 |
---|---|---|---|
url | 接口名 | String |
'' |
data | 请求体 | Object |
{} |
ignoreToken | 请求是否携带token | Boolean |
false |
form | 是否是表单请求 | Boolean |
false La structure des répertoires est la suivante : | rrreee
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!