JavaScript中async,await的使用和方法

JS中 async函数和await 关键字

function hellworld() {

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

}

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

async function asyHellworld() {

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

}

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

普通函数 hellworld 将简单地返回字符串 您好!美好世界! ,而 async 函数将返回 Promise 对象。

如果需要使用异步函数返回的值,则需要在它后面添加 .then() 程序块,如下:

async function asyHellworld() {

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

}

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

await 关键字将确保异步函数的 Promise 将在继续执行其它可能需要等待值的代码之前完成并返回结果。

async function asyHellworld() {

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

}

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

这段代码虽然简单,但确实显示了 await 关键字的用法,以及它应该如何在函数体中使用 Promise 对象。

接下来为了让代码更容易理解,去掉代码中的 Promise 语法,如下:

async function asyHellworld() {

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

}

async function printHello() {

    const strHello = await asyHellworld();

    console.log(strHello);

}

printHello();

上面这段代码可以更加直观的看清楚 async 和 await 的使用。通常 async 和 await 是用来处理异步操作,是把异步变为同步的一种方法。

async 声明一个 function 来表示这个异步函数,await 用于等待函数中某个异步操作执行完成。

通过上面的介绍,对 async 和 await 有一个初步的认识,那么能用来做什么呢?

await 关键字将确保异步函数的 Promise 将在继续执行其它可能需要等待值的代码之前完成并返回结果。

因此,在处理AJAX异步请求的时候,如在VUE项目中,通常处理的方式如下:

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

    // 登录请求发出后的处理请求

    console.log("登录成功!");

});

而使用 await 就可以这样来处理:

const loginResult = await login(username, password);

console.log(loginResult);

这里需要注意一点,await 要在异步函数中才能使用,上面代码是有问题,假如是在 store 里面处理的话,就需要改成:

const actions = {

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

        const { username, password } = payload;

        const loginResult = await login(username, password);

        console.log(loginResult);

    },

};

在这里可以看出,对于要处理由多个 Promise 组成的 then 链的时候,优势就能体现出来了。

还有一个常用的用途,是实现程序的暂停,即 sleep 方法,实现代码如下:

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

(async () => {
    console.log("开始执行,10秒打印你好");
    await sleep(10 * 1000);
    console.log("你好");
})();

到此这篇关于JavaScript中async,await的使用和方法的文章就介绍到这了,更多相关Js async和await 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS为什么说async/await是generator的语法糖详解

    关于async的介绍,在阮一峰的ES6入门教程中说到: async 函数是什么?一句话,它就是 Generator 函数的语法糖. 可是,为什么这么说呢? 首先,比如说有一个异步操作,使用 async/await 语法来以同步模拟异步操作. 使用 async/await 实现一个 sleep 的功能 function sleep(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(1); },

  • Js中async/await的执行顺序详解

    前言 虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉可以先看下这篇文章)后拓展了一下,我理了一下await之后js的执行顺序,希望可以给别人解疑答惑,先简单介绍一下async/await. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上

  • 详解JavaScript Promise和Async/Await

    概述 一般在开发中,查询网络API操作时往往是比较耗时的,这意味着可能需要一段时间的等待才能获得响应.因此,为了避免程序在请求时无响应的情况,异步编程就成为了开发人员的一项基本技能. 在JavaScript中处理异步操作时,通常我们经常会听到 "Promise "这个概念.但要理解它的工作原理及使用方法可能会比较抽象和难以理解. 四个示例 那么,在本文中我们将会通过实践的方式让你能更快速的理解它们的概念和用法,所以与许多传统干巴巴的教程都不同,我们将通过以下四个示例开始: 示例1:用生

  • JavaScript中的await/async的作用和用法

    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了.虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段. 直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据 老朋友 Ajax 传统的写法,无需解释 // 获取产品数据 ajax('products.json', (products) => { console.log('AJAX/products >>>', JSON

  • JS基于ES6新特性async await进行异步处理操作示例

    本文实例讲述了JS基于ES6新特性async await进行异步处理操作.分享给大家供大家参考,具体如下: 我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点callback的写法了,那是相当恶心的,下面我就来讲一下如何使用ES6的新特性async await进行异步处理,使上述情况就好像写同步代码一样,首先我们先举个例子: 先写上json文件: c

  • JavaScript async/await原理及实例解析

    随着Node 7的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await. 异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案. async 和 await 起了什么作用 async 起什么作用 这个问题的关键在于,async 函数是怎么处理它的返回值的! 我们当然希望它能直接通过return语句返回我们想要的值,但是如果真是这样,似乎就没 await 什么事了.所以,写段代码来试试,看它到底会返回

  • JS中async/await实现异步调用的方法

    async/await多个函数关联调用 async/await使得异步代码看起来像同步代码 async函数会隐式地返回一个promise,而promise的reosolve值就是函数return的值 Async/Await不需要写.then,不需要写匿名函数处理Promise的resolve值,也不需要定义多余的data变量,还避免了嵌套代码 async声明一个异步函数 await只能在async函数中使用,后面跟一个promise对象 所以在模拟异步调用函数时,函数体内返回promise as

  • async/await与promise(nodejs中的异步操作问题)

    举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa

  • 深入理解JavaScript的async/await

    async 和 await 在干什么 任意一个名称都是有意义的,先从字面意思来理解.async 是"异步"的简写,而 await 的意思是等待.所以应该很好理解 async 用于申明一个 function 是异步的,而 await 等待某个操作完成. 那么async/await到底是干嘛的呢?我们先来简单介绍一下. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上.(对promi

  • 在JS循环中使用async/await的方法

    async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享在JS循环中使用async/await的方法. 在开发maty.js时,遇到一个数组任务,数组项是内部异步执行的函数,期望是同步依次执行每项函数,每项函数执行完本身的异步任务后,继续下一项. 刚开始单纯使用map来循环执行,并且await每项函数.如下所示: starters.map(async (fn,

随机推荐