ES6 async、await的基本使用方法示例

本文实例讲述了ES6 async、await的基本使用方法。分享给大家供大家参考，具体如下：

async是异步编程的最新标准，我们来看看async如何使用

1.async的简单使用

async function fn () {
 return 'abc'
}
console.log(fn());                    // Promise { 'abc' }
fn().then(res => {
 console.log(res);                    // "abc"
})

async作为关键字放在函数前面，让同步的函数成为异步函数，不关函数里返回什么，打印出还是promise，说明async还是基于promise的，async的异步方式还是比promise更加简单优雅的。

2.await的简单使用

// 这里模拟一个耗时操作
function asyncFunc() {
 return new Promise( resolve => {
  setTimeout(() => {
   resolve(100)
  }, 1000);
 })
}

async function fn () {
 let a = await asyncFunc();
 console.log(a);                    // 100
}

fn()

一秒后打印出了100，async和await搭配使用，await可以接收异步函数，整个过程看上去有点像同步代码，但其实是异步操作。

我们在fn()上加上一行代码

async function fn () {
 let a = await asyncFunc();
 console.log(a);                    // 100
 console.log(200);                    // 200
}

执行上面代码看到两次都是在暂停一秒打印出来的，这说明await的后面如果是promise(耗时操作)，它会阻塞整个函数，下面的代码不会执行。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 详解ES6中的三种异步解决方案

    前置知识准备 Generator 函数 执行会返回一个迭代器(Iterator), 在迭代器上可以调用  next() 方法, 执行下一个 yield  或 return 调用  next() 方法,会返回一个对象 {value: res, done: false} , value 的值 为 yield 之后表达式的值,done 的值 表示迭代器,是否已经执行完毕(最后一个yield  或 return ) next() 方法,可以传入一个值,做为前一个yield 表达式的返回值 有了这些知识,

  • ES6的Fetch异步请求的实现方法

    在前端的快速发展中,为了契合更好的设计模式,产生了Fetch框架,Fetch返回的信息比XMLHttpRequest更丰富.但它目前还不是一个标准,它支持大部分常用的http 请求和响应的标准. 一. 一个完整的post请求和响应的过程 var url = "/fetch"; fetch(url,{ method:"post", headers:{ "Content-type":"application/x-www-form-urlen

  • 详解ES6之async+await 同步/异步方案

    异步编程一直是JavaScript 编程的重大事项.关于异步方案, ES6 先是出现了 基于状态管理的 Promise,然后出现了 Generator 函数 + co 函数,紧接着又出现了 ES7 的 async + await 方案. 本文力求以最简明的方式来疏通 async + await. 异步编程的几个场景 先从一个常见问题开始:一个for 循环中,如何异步的打印迭代顺序? 我们很容易想到用闭包,或者 ES6 规定的 let 块级作用域来回答这个问题. for (let val of [

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

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

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

  • es6学习笔记之Async函数的使用示例

    前言 异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题. 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底.它们都有额外的复杂性,都需要理解抽象的底层运行机制. 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案.下面就来看看关于async函数的两个栗子: 栗子

  • ES6的异步操作之promise用法和async函数的具体使用

    promise 基本用法 Promise 对象是一个构造函数,用来生成 Promise 实例.Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 和 reject. resolve 函数的作用是,在异步操作成功时调用(Promise 对象的状态从 pending 变为 fulfilled),并将异步操作的结果,作为参数传递出去. reject 函数的作用是,在异步操作失败时调用(Promise对象的状态从 pending 变为 rejected),并将异步操作报

  • ES6中异步对象Promise用法详解

    本文实例讲述了ES6中异步对象Promise用法.分享给大家供大家参考,具体如下: 回忆一下ES5中的怎么使用异步方法 // es5中的异步回调 let ajax = function(callback){ console.log('执行') // 执行 setTimeout(() => { callback&&callback.call(); }, 1000) }; ajax(function(){ console.log('hello') // 1s后打印hello }); 使用

  • ES6新特性八：async函数用法实例详解

    本文实例讲述了ES6新特性之async函数用法.分享给大家供大家参考,具体如下: 1. async 函数是什么? node.js 版本7及之后版本才支持该函数. 可以简单的理解为他是Generator 函数的语法糖,即Generator 函数调用next() 返回的结果. ① Generator 函数需要next() 或执行器进行执行,而async 函数只需和普通函数一样执行. ② async和await,比起星号和yield,语义更清楚了.async表示函数里有异步操作,await表示紧跟在后

  • es6学习笔记之Async函数基本教程

    本文介绍的是关于es6中Async函数的相关内容,非常出来供大家参考学习,需要的朋友们下面来看看详细的介绍: async 函数 async 函数,使得异步操作变得更加方便.它是 Generator 函数的语法糖. Generator 函数,依次读取两个文件: var fs = require('fs'); var readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile

  • 详解ES6 系列之异步处理实战

    前言 我们以查找指定目录下的最大文件为例,感受从 回调函数 -> Promise -> Generator -> Async 异步处理方式的改变. API 介绍 为了实现这个功能,我们需要用到几个 Nodejs 的 API,所以我们来简单介绍一下. fs.readdir readdir 方法用于读取目录,返回一个包含文件和目录的数组. fs.stat stat 方法的参数是一个文件或目录,它产生一个对象,该对象包含了该文件或目录的具体信息.此外,该对象还有一个 isFile() 方法可以

随机推荐