There are a large number of interfaces in WeChat mini programs that are asynchronous calls, such as wx.login(), wx.request(), wx.getUserInfo(), etc., which all use an object as a parameter and define success(), fail () and complete() serve as callbacks in different situations of asynchronous calls.

However, writing a program in the form of callbacks is really painful. If there is a process that needs to do these things in sequence:

• wx.getStorage() Get the cache Data, check login status

• wx.getSetting() Get configuration information,

• wx.login() use configuration information to log in

• wx.getUserInfo() Obtain user information after logging in

• wx.request() Initiate a data request to the business server

Then, the code will probably look like this

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

Obviously, async/await can make the code with the same logic look much more comfortable. However, by default, "WeChat Developer Tools" does not support async/await. How to enable?

1. Use async/await

---

If you are interested, search for async in the official WeChat applet documentation and you can find "Tools ? Development Assistant ? Code Compilation "The support for async/await is mentioned on the page. It is in a table in the "Add Compilation" section. There is an excerpt:

Development tools in 1.02.1904282 and later versions , an enhanced compilation option has been added to enhance the ability to convert ES6 to ES5. When enabled, new compilation logic will be used and additional options will be provided for developers to use.

• Support async/await syntax, inject regeneratorRuntime on demand, the directory location is consistent with the auxiliary function
  

In short, That is, as long as the "WeChat Developer Tools" are updated to v1.02.1904282 or above, there is no need to do things like npm install regenerator. You only need to modify a configuration item to use the async/await feature. This configuration is in the "Toolbar?Details?Local Settings" page.

In order to quickly verify that async/await is available, add a piece of code to the onLaunch() event function of app.js:

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

In a short period of automatic compilation After running, you can see the output in the Console tab of the debugger interface:

hello async/await

If not, please check the version of "WeChat Developer Tools" first - at least, downloading the latest version will not work. problematic.

2. Transform wx.abcd asynchronous method

---

Although async/await is supported, wx.abcd still needs to be modified () only needs to be encapsulated in Promise style.

Node.js provides promisify in the util module to convert Node.js style callbacks into Promise style, but obviously it does not work with wx style. Just do it yourself, and don’t think too much. For example, wx-style asynchronous calls are all consistent in form. Their characteristics are as follows:

• Use an object to pass all parameters, including Three main callbacks

• success: (res) => any Callback when the asynchronous method succeeds

• ##fail: (err) = > any Callback when the asynchronous method fails

##complete: () => any Callback when the asynchronous method completes (regardless of success or failure)
So, if wx.abcd() is changed to Promise style and written through async/await, it should probably look like this

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

Of course, the catch and finally parts are not Must, that is, do not necessarily have to use a try block. However, if catch is not used, there will be a pitfall, which will be discussed later. The first thing to do now is transformation.

2.1. Definition promisify()

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

function promisify(fn) {
    // promisify() 返回的是一個函數(shù)，
    // 這個函數(shù)跟傳入的 fn（即 wx.abcd） 簽名相同（或兼容）
    return async function(args) {
    //                    ^^^^ 接受一個單一參數(shù)對象
        return new Promise((resolve, reject) => {
    //             ^^^^^^^^^^^ 返回一個 Promise 對象
            fn({
    //      ^^ ^ 調(diào)用原函數(shù)并使用改造過的新的參數(shù)對象
                ...(args || {}),
    //          ^^^^^^^^        這個新參數(shù)對象得有原本傳入的參數(shù)，
    //                      ^^  當然得兼容沒有傳入?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)，
    // 因為 complete 的內(nèi)容可以寫在這里
}

2.2. 定義 wx.async()

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

function toAsync(names) {    // 這里 names 期望是一個數(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;
        }, {});
}

這個 toAsync 的用法大致是這樣的

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

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

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

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

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

還沒完，因為我不想在每一個 JS 文件中去 import { toAsync } from ...。所以把它在 App.onLaunch() 中把它注入到 wx 對象中去，就像這樣

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

3. await 帶來的神坑

工具準備好了，代碼也大刀闊斧地進行了改造，看起來舒服多了，一運行卻報錯！為什么？？？

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

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

改造之后是這樣

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

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

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

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

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

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

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

3.1. 忽略不需要處理的錯誤

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

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

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

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

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

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

用起來也像那么回事

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

對于單個 await 異步調(diào)用，如果不想寫 try ... catch ... 塊，還可以自己定義一個 ifError(fn) 來處理錯誤的情況。但是如果需要批量處理錯誤，還是 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) {
    // 處理錯誤吧
}

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

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

The above is the detailed content of Using async/await in WeChat development. For more information, please follow other related articles on the PHP Chinese website!