Comment effectuer un traitement asynchrone dans l'applet WeChat

Cet article présente la méthode de traitement asynchrone dans le développement d'applets WeChat. J'espère qu'il sera utile aux amis qui apprennent le développement d'applets WeChat !

Comment l'applet WeChat effectue un traitement asynchrone

L'applet WeChat effectue un traitement asynchrone via wx.request, en l'utilisant C'est en effet beaucoup d'inconvénients et ne peut pas être toléré. Heureusement, le mini programme prend en charge la syntaxe ES6, il peut donc être légèrement modifié à l'aide de promesses.

Apprentissage recommandé :Développement de mini-programmes

Page({ data: { myData: }, // loadMyData函数用于打印myData的值 loadMyData () { console.log(获取到的数据为： + this.data.myData) }, // 生命周期函数onload用于监听页面加载 onload: function () { wx.request({ url: https://api, // 某个api接口地址 success: res => { console.log(res.data) this.setData({ myData: res.data }) console.log(this.data.myData) } }) // 调用之前的函数 this.loadMyData() } })

Ensuite, nous obtiendrons le résultat comme ceci sur la console :

Il s'agit en fait d'un problème asynchrone très simple. wx.request est une requête asynchrone, JS n'attendra pas que wx.request soit exécuté avant de continuer, donc JS exécutera this.loadMyData() en premier dans l'ordre, et attendra le résultat. serveur pour renvoyer les données, loadMyData() a été exécuté il y a longtemps et bien sûr la valeur n'a pas été obtenue.

En fait, on dit seulement "retour" dans le processus synchrone. Il n'y a pas de notion de "retour" en asynchrone (ou le retour asynchrone n'a aucun sens). pour a Pour les fonctions asynchrones, nous devons transmettre une "fonction de rappel" pour recevoir les résultats.

Solution préliminaire : recevoir les résultats via des rappels

La solution la plus simple est d'écrire la fonction qui doit utiliser des données asynchrones dans le rappel :

onload: function () { wx.request({ url: https://api, // 某个api接口地址 success: res => { console.log(res.data) this.setData({ myData: res.data }) console.log(this.data.myData) // 把使用数据的函数写在回调函数success中 this.loadMyData() } }) }

Nous avons constaté que la requête réseau wx.request de l'applet WeChat repose sur une fonction de rappel, similaire au précédent $.ajax. Elle présente également des inconvénients lorsque la logique est complexe et que l'ordre d'exécution des pages est requis. Heureusement, le mini-programme prend en charge ES6, nous pouvons donc adopter Promise autant que possible !

Utiliser Promise pour envelopper wx.request

Promise signifie simplement qu'il peut séparer la logique d'exécution asynchrone et le traitement des résultats, éliminant ainsi le besoin de couches de rappels imbriqués rendre la logique de traitement plus claire.

/** * requestPromise用于将wx.request改写成Promise方式 * @param：{string} myUrl 接口地址 * @return: Promise实例对象 */ const requestPromise = myUrl => { // 返回一个Promise实例对象 return new Promise((resolve, reject) => { wx.request({ url: myUrl, success: res => resolve(res) }) }) } // 我把这个函数放在了utils.js中，这样在需要时可以直接引入 module.exports = requestPromise

Essayez de l'utiliser maintenant :

// 引用模块 const utilApi = require(../../utils/util.js) Page({ ... // 生命周期函数onload用于监听页面加载 onLoad: function () { utilApi.requestPromise(https://www.bilibili.com/index/ding.json) // 使用.then处理结果 .then(res => { console.log(res.data) this.setData({ myData: res.data }) console.log(this.data.myData) this.loadMyData() }) } })

Le résultat est le même que si vous utilisiez la fonction de rappel. Lorsqu'il y a plusieurs requêtes asynchrones, utilisez simplement .then(fn) pour les traiter directement, et la logique est claire.

Bien sûr, il ne s'agit que de la fonction Promise la plus simple, qui n'est pas complète. Un wx.request plus complet basé sur la promesse sera amélioré en fonction des besoins commerciaux futurs. En outre, divers petits frameworks de développement de programmes disposent également d'API de promesses prêtes à l'emploi, prêtes à l'emploi.

Site Web PHP chinois, un grand nombre de tutoriels de programmation et detutoriels de création de sites Web, bienvenue pour apprendre !

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!