JS中 async函數(shù)和await 關(guān)鍵字

function hellworld() {

    return "您好！美好世界！";

}

console.log(hellworld()); // 您好！美好世界！

async function asyHellworld() {

    return "您好！美好世界！";

}

console.log(asyHellworld()); // Promise { '您好！美好世界！' }

普通函數(shù) hellworld 將簡(jiǎn)單地返回字符串 您好！美好世界！ ，而 async 函數(shù)將返回 Promise 對(duì)象。

如果需要使用異步函數(shù)返回的值，則需要在它后面添加 .then() 程序塊，如下：

async function asyHellworld() {

    return "您好！美好世界！";

}

asyHellworld().then((str) => console.log(str)); // 您好！美好世界！

await 關(guān)鍵字將確保異步函數(shù)的 Promise 將在繼續(xù)執(zhí)行其它可能需要等待值的代碼之前完成并返回結(jié)果。

async function asyHellworld() {

    return await Promise.resolve("您好！美好世界！");

}

asyHellworld().then(console.log); // 您好！美好世界！

這段代碼雖然簡(jiǎn)單，但確實(shí)顯示了 await 關(guān)鍵字的用法，以及它應(yīng)該如何在函數(shù)體中使用 Promise 對(duì)象。

接下來(lái)為了讓代碼更容易理解，去掉代碼中的 Promise 語(yǔ)法，如下：

async function asyHellworld() {

    return "您好！美好世界！";

}

async function printHello() {

    const strHello = await asyHellworld();

    console.log(strHello);

}

printHello();

上面這段代碼可以更加直觀的看清楚 async 和 await 的使用。通常 async 和 await 是用來(lái)處理異步操作，是把異步變?yōu)橥降囊环N方法。

async 聲明一個(gè) function 來(lái)表示這個(gè)異步函數(shù)，await 用于等待函數(shù)中某個(gè)異步操作執(zhí)行完成。

通過(guò)上面的介紹，對(duì) async 和 await 有一個(gè)初步的認(rèn)識(shí)，那么能用來(lái)做什么呢？

await 關(guān)鍵字將確保異步函數(shù)的 Promise 將在繼續(xù)執(zhí)行其它可能需要等待值的代碼之前完成并返回結(jié)果。

因此，在處理AJAX異步請(qǐng)求的時(shí)候，如在VUE項(xiàng)目中，通常處理的方式如下：

login(username, password).then((loginResult) => {

    // 登錄請(qǐng)求發(fā)出后的處理請(qǐng)求

    console.log("登錄成功！");

});

而使用 await 就可以這樣來(lái)處理：

const loginResult = await login(username, password);

console.log(loginResult);

這里需要注意一點(diǎn)，await 要在異步函數(shù)中才能使用，上面代碼是有問(wèn)題，假如是在 store 里面處理的話，就需要改成：

const actions = {

    async [LOGIN]({ commit }, payload) {

        const { username, password } = payload;

        const loginResult = await login(username, password);

        console.log(loginResult);

    },

};

在這里可以看出，對(duì)于要處理由多個(gè) Promise 組成的 then 鏈的時(shí)候，優(yōu)勢(shì)就能體現(xiàn)出來(lái)了。

還有一個(gè)常用的用途，是實(shí)現(xiàn)程序的暫停，即 sleep 方法，實(shí)現(xiàn)代碼如下：

const sleep = (ms) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
};

(async () => {
    console.log("開始執(zhí)行，10秒打印你好");
    await sleep(10 * 1000);
    console.log("你好");
})();

到此這篇關(guān)于JavaScript中async,await的使用和方法的文章就介紹到這了,更多相關(guān)Js async和await 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論