So führen Sie eine asynchrone Verarbeitung im WeChat-Applet durch

Dieser Artikel stellt die asynchrone Verarbeitungsmethode in der WeChat-Applet-Entwicklung vor. Ich hoffe, dass er für Freunde hilfreich sein wird, die die Entwicklung von WeChat-Applets erlernen.

Wie das WeChat-Applet eine asynchrone Verarbeitung durchführt

Das WeChat-Applet führt eine asynchrone Verarbeitung über wx.request durch und verwendet es Das ist in der Tat eine große Unannehmlichkeit und kann nicht toleriert werden. Glücklicherweise unterstützt das Miniprogramm die ES6-Syntax, sodass es mithilfe von Versprechen leicht modifiziert werden kann.

Empfohlenes Lernen: Mini-Programmentwicklung

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

Dann erhalten wir das Ergebnis so auf der Konsole:

Dies ist eigentlich ein sehr einfaches asynchrones Problem. JS wartet nicht auf die Ausführung von wx.request, bevor es fortfährt. Daher führt JS zuerst this.loadMyData() aus und wartet auf die Wenn der Server die Daten zurückgibt, wurde „loadMyData()“ schon vor langer Zeit ausgeführt und der Wert wurde natürlich nicht abgerufen.

Tatsächlich sagen wir im synchronen Prozess nur „Return“. Im asynchronen Prozess gibt es kein Konzept für „Return“ (oder asynchrones Return entspricht „Callback“). Für asynchrone Funktionen sollten wir eine „Rückruffunktion“ übergeben, um die Ergebnisse zu erhalten.

Erste Lösung: Ergebnisse durch Rückrufe erhalten

Die einfachste Lösung besteht darin, die Funktion zu schreiben, die asynchrone Daten im Rückruf verwenden muss:

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

Wir haben festgestellt, dass die Netzwerkanforderung wx.request des WeChat-Applets auf einer Rückruffunktion basiert, die der vorherigen $.ajax ähnelt. Sie hat auch Nachteile, wenn die Logik komplex ist und die Reihenfolge der Seitenausführung erforderlich ist. Glücklicherweise unterstützt das Miniprogramm ES6, sodass wir Promise so gut wie möglich nutzen können!

Verwenden Sie Promise, um wx.request zu umschließen

Promise bedeutet einfach, dass es asynchrone Ausführungslogik und Ergebnisverarbeitung trennen kann, wodurch die Notwendigkeit von Schichten verschachtelter Rückrufe entfällt Machen Sie die Verarbeitungslogik klarer.

/** 
* 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

Versuchen Sie es jetzt erneut:

// 引用模块
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() 
        }) 
    } 
})

Das Ergebnis ist das gleiche wie bei Verwendung der Callback-Funktion. Wenn mehrere asynchrone Anforderungen vorliegen, verwenden Sie einfach .then(fn), um sie direkt zu verarbeiten, und die Logik ist klar.

Natürlich ist dies nur die einfachste Promise-Funktion, die nicht vollständig ist. Eine umfassendere Promise-basierte wx.request wird an zukünftige Geschäftsanforderungen angepasst. Darüber hinaus verfügen verschiedene kleine Programmentwicklungs-Frameworks auch über vorgefertigte Promise-APIs, die sofort einsatzbereit sind.

PHP chinesische Website, eine große Anzahl von Programmier-Tutorials und Tutorials zum Erstellen von Websites, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonSo führen Sie eine asynchrone Verarbeitung im WeChat-Applet durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!