Es gibt eine gro?e Anzahl von Schnittstellen in WeChat-Miniprogrammen, die asynchron aufgerufen werden, wie z. B. wx.login(), wx.request(), wx.getUserInfo() usw., die alle ein Objekt als Parameter verwenden und definieren Success(), Fail() und Complete(), die in verschiedenen Situationen asynchroner Aufrufe als Rückrufe dienen.

Ein Programm in Form von Rückrufen zu schreiben ist jedoch wirklich ?rgerlich. Wenn es einen Prozess gibt, der diese Dinge nacheinander ausführen muss:

• wx.getStorage(. ), um die Cache-Daten zu erhalten, überprüfen Sie den Anmeldestatus

• wx.getSetting(), um Konfigurationsinformationen zu erhalten,

• wx.login() zu Melden Sie sich mit Konfigurationsinformationen an

• wx.getUserInfo() ruft Benutzerinformationen nach der Anmeldung ab

• wx.request() initiiert eine Datenanforderung an der Business-Server

Dann wird der Code wahrscheinlich so aussehen

wx.getStorage({
    fail: () => {
        wx.getSetting({
            success: settings => {
                wx.login({
                    success: ({ code }) => {
                        wx.getUesrInfo({
                            code,
                            success: (userInfo) => {
                                wx.request({
                                    success: () => {
                                        // do something
                                    }
                                });
                            }
                        });
                    }
                });
            }
        });
    }
});

Async/await kann natürlich dafür sorgen, dass der Code mit der gleichen Logik viel komfortabler aussieht. Allerdings unterstützen ?WeChat Developer Tools“ standardm??ig kein Async/Await. Wie aktiviere ich?

1. Verwenden Sie async/await

Wenn Sie interessiert sind, suchen Sie in der offiziellen WeChat-Applet-Dokumentation nach ?Tools ? Entwicklungshilfe“. ? Codekompilierung ?Die Unterstützung für async/await wird auf der Seite erw?hnt. Sie befindet sich in einer Tabelle im Abschnitt ?Kompilierung hinzufügen“. Es gibt einen Auszug:

Entwicklungstools in 1.02 .1904282 und sp?tere Versionen wurde eine erweiterte Kompilierungsoption hinzugefügt, um die F?higkeit zur Konvertierung von ES6 in ES5 zu verbessern. Wenn diese Option aktiviert ist, wird eine neue Kompilierungslogik verwendet und Entwicklern werden zus?tzliche Optionen zur Verfügung gestellt.

• Unterstützt die Async/Warten-Syntax, injiziert regeneratorRuntime bei Bedarf, der Verzeichnisspeicherort stimmt mit der Hilfsfunktion überein
  

Kurz gesagt: Solange die ?WeChat Developer Tools“ auf Version 1.02.1904282 oder h?her aktualisiert sind, ist es nicht erforderlich, Dinge wie den NPM-Installationsregenerator durchzuführen. Sie müssen lediglich ein Konfigurationselement ?ndern, um Async/Await zu verwenden Besonderheit. Diese Konfiguration finden Sie auf der Seite ?Symbolleiste?Details?Lokale Einstellungen“.

Um schnell zu überprüfen, ob async/await verfügbar ist, fügen Sie einen Code in die onLaunch()-Ereignisfunktion von app.js ein:

(async () => {    const p = await new Promise(resolve => {
        setTimeout(() => resolve("hello async/await"), 1000);
    });    console.log(p);
})();

Nach einer kurzen automatischen Kompilierung Nach dem Ausführen k?nnen Sie die Ausgabe auf der Registerkarte ?Konsole“ der Debugger-Schnittstelle sehen:

hello async/await

Wenn nicht, überprüfen Sie bitte zuerst die Version der ?WeChat Developer Tools“ – laden Sie zumindest die herunter Die neueste Version funktioniert nicht. Es liegt ein Problem vor.

2. Transformieren Sie die asynchrone Methode wx.abcd

Obwohl async/await unterstützt wird, muss wx.abcd ge?ndert werden () muss nur im Promise-Stil gekapselt werden.

Node.js stellt im util-Modul promisify bereit, um Rückrufe im Node.js-Stil in den Promise-Stil zu konvertieren, aber offensichtlich funktioniert es nicht mit dem WX-Stil. Machen Sie es einfach selbst, und Sie müssen nicht zu viel nachdenken. Asynchrone Aufrufe im WX-Stil sind beispielsweise alle in ihrer Form konsistent:

• Verwenden Sie an Objekt zum übergeben aller Parameter, einschlie?lich drei Hauptrückrufe

• success: (res) => jeder Rückruf, wenn die asynchrone Methode erfolgreich ist

• fail : (err) = > beliebiger Rückruf, wenn die asynchrone Methode fehlschl?gt

• complete: () => beliebiger Rückruf, wenn die asynchrone Methode abgeschlossen wird (unabh?ngig von Erfolg oder Misserfolg)

Wenn also wx.abcd() in den Promise-Stil ge?ndert und über async/await geschrieben wird, sollte es wahrscheinlich so aussehen

try {
    const res = wx.abcd();
    // do anything in success callback
} catch (err) {
    // do anything in fail callback
} finally {
    // do anything in complete callback
}

Natürlich der Haken Und schlie?lich müssen Teile nicht unbedingt einen Try-Block verwenden, d. h. sie müssen nicht unbedingt verwendet werden. Wenn der Fang jedoch nicht verwendet wird, gibt es eine Gefahr, die sp?ter besprochen wird. Das erste, was jetzt zu tun ist, ist die Transformation.

2.1. Definition promisify()

promisify() 就是一個(gè)封裝函數(shù)，傳入原來的 wx.abcd 作為參加，返回一個(gè) Promise 風(fēng)格的新函數(shù)。代碼和解釋如下：

function promisify(fn) {
    // promisify() 返回的是一個(gè)函數(shù)，
    // 這個(gè)函數(shù)跟傳入的 fn（即 wx.abcd） 簽名相同（或兼容）
    return async function(args) {
    //                    ^^^^ 接受一個(gè)單一參數(shù)對(duì)象
        return new Promise((resolve, reject) => {
    //             ^^^^^^^^^^^ 返回一個(gè) Promise 對(duì)象
            fn({
    //      ^^ ^ 調(diào)用原函數(shù)并使用改造過的新的參數(shù)對(duì)象
                ...(args || {}),
    //          ^^^^^^^^        這個(gè)新參數(shù)對(duì)象得有原本傳入的參數(shù)，
    //                      ^^  當(dāng)然得兼容沒有傳入?yún)?shù)的情況
                success: res => resolve(res),
    //          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^  注入 success 回調(diào)，resovle 它
                fail: err => reject(err)
    //          ^^^^^^^^^^^^^^^^^^^^^^^^ 注入 fail 回調(diào)，reject 它
            });
        });
    };
}

舉例使用它：

const asyncLogin = promisify(wx.login);  // 注意別寫成 wx.login()，為什么，我不說
try {
    const res = asyncLogin();
    const code = res.code;
    // do something with code
} catch (err) {
    // login error
} finally {
    // promisify 里沒有專門注入 complete 回調(diào)，
    // 因?yàn)?complete 的內(nèi)容可以寫在這里
}

2.2. 定義 wx.async()

不過老實(shí)說，把要用的異步方法通過 promisify 一個(gè)個(gè)處理，寫起來還是挺煩的，不如寫個(gè)工具函數(shù)把要用的方法一次性轉(zhuǎn)換出來。不過一查，wx 下定義了不知道多少異步方法，還是退而求其次，用到啥轉(zhuǎn)啥，不過可以批量轉(zhuǎn)，轉(zhuǎn)出來的結(jié)果還是封裝在一個(gè)對(duì)象中。整個(gè)過程就是迭代處理，最后把每個(gè)處理結(jié)果聚焦在一起：

function toAsync(names) {    // 這里 names 期望是一個(gè)數(shù)組
    return (names || [])
        .map(name => (
            {
                name,
                member: wx[name]
            }
        ))
        .filter(t => typeof t.member === "function")
        .reduce((r, t) => {
            r[t.name] = promisify(wx[t.name]);
            return r;
        }, {});
}

這個(gè) toAsync 的用法大致是這樣的

const awx = toAsync(["login", "request"]);
await awx.login();
await awx.request({...});

有些人可能更習(xí)慣單個(gè)參數(shù)傳入的方式，像這樣

const awx = toAsync("login", "request");

那么在 toAsync 的定義中，參數(shù)改為 ...names 就好，即

function toAsync(...names) { ... }

還沒完，因?yàn)槲也幌朐诿恳粋€(gè) JS 文件中去 import { toAsync } from ...。所以把它在 App.onLaunch() 中把它注入到 wx 對(duì)象中去，就像這樣

App({
    onLaunch: function() {
        // ...
        wx.async = toAsync;
        // ...
    }
});

3. await 帶來的神坑

工具準(zhǔn)備好了，代碼也大刀闊斧地進(jìn)行了改造，看起來舒服多了，一運(yùn)行卻報(bào)錯(cuò)！為什么？？？

先來看一段原來的代碼，是這樣的

wx.getStorage({
    key: "blabla",
    success: res => {
        // do with res
    }
});

改造之后是這樣

const res = await awx.getStorage({ key: "blabla" });  // <== runtime error
// do with res

awx.getStorage 拋了個(gè)異常，原因是叫 "blabal" 的這個(gè)數(shù)據(jù)不存在。

為什么原來沒有錯(cuò)，現(xiàn)在卻報(bào)錯(cuò)？

因?yàn)樵瓉頉]有定義 fail 回調(diào)，所以錯(cuò)誤被忽略了。但是 promisify() 把 fail 回調(diào)封裝成了 reject()，所以 awx.getStorage() 返回的 Promise 對(duì)象上，需要通過 catch() 來處理。我們沒有直接使用 Promise 對(duì)象，而是用的 await 語法，所以 reject() 會(huì)以拋出異常的形式體現(xiàn)出來。

用人話說，代碼得這樣改：

try {
    const res = await awx.getStorage({ key: "blabla" });  // <== runtime error
    // do with res
} catch (err) {
    // 我知道有錯(cuò)，就是當(dāng)它不存在！
}

傷心了不是？如果沒有傷心，你想想，每一個(gè)調(diào)用都要用 try ... catch ... 代碼塊，還能不傷心嗎？

3.1. 忽略不需要處理的錯(cuò)誤

處理錯(cuò)誤真的是個(gè)好習(xí)慣，但真的不是所有錯(cuò)誤情況都需要處理。其實(shí)要忽略錯(cuò)誤也很簡單，直接在每個(gè) Promise 形式的異步調(diào)后面加句話就行，比如

const res = await awx
    .getStorage({ key: "blabla" })
    .catch(() => {});
//  ^^^^^^^^^^^^^^^^ 捕捉錯(cuò)誤，但什么也不干

稍微解釋一下，在這里 awx.getStorage() 返回一個(gè) Promise 對(duì)象，對(duì)該對(duì)象調(diào)用 .catch() 會(huì)封裝 reject 的情況，同時(shí)它會(huì)返回一個(gè)新的 Promise 對(duì)象，這個(gè)對(duì)象才是 await 等待的 Promise。

不過感覺 .catch(() => {}) 寫起來怪怪的，那就封裝成一個(gè)方法吧，這得改 Promise 類的原形

Promise.prototype.ignoreError = function() {
    return this.catch(() => { });
};

這段代碼放在定義 toAsync() 之前就好。

用起來也像那么回事

const res = await awx
    .getStorage({ key: "blabla" })
    .ignoreError();

對(duì)于單個(gè) await 異步調(diào)用，如果不想寫 try ... catch ... 塊，還可以自己定義一個(gè) ifError(fn) 來處理錯(cuò)誤的情況。但是如果需要批量處理錯(cuò)誤，還是 try ... catch ... 用起順手：

4. 回到開始

try {
    const storeValue = await awx.getStorage({});
    const settings = await awx.getSetting();
    const { code } = await awx.login();
    const userInfo = await awx.getUserInfo({ code });
} catch (err) {
    // 處理錯(cuò)誤吧
}

看，不需要對(duì)每個(gè)異步調(diào)用定義?fail?回調(diào)，一個(gè)?try ... catch ...?處理所有可能產(chǎn)生的錯(cuò)誤，這可不也是 async/await 的優(yōu)勢！

推薦教程： 《微信小程序》

Das obige ist der detaillierte Inhalt vonVerwendung von async/await in der WeChat-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!