ECMAScript 6 学习(二)async函数

 1、什么是async函数

2、用法

  2.1基本用法

3、语法

  3.1返回promise对象

  3.2promise状态的变化

  3.3await命令

1、什么是async函数

async函数也是异步编程的解决方案。

async函数是对是对generator函数进行了改进。

var readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) reject(error);
      resolve(data);
    });
  });
};

var gen = function* () {
  var f1 = yield readFile(‘/etc/fstab‘);
  var f2 = yield readFile(‘/etc/shells‘);
  console.log(f1.toString());
  console.log(f2.toString());
};

后边的gen函数,写成async函数

var asyncReadFile = async function () {
  var f1 = await readFile(‘/etc/fstab‘);
  var f2 = await readFile(‘/etc/shells‘);
  console.log(f1.toString());
  console.log(f2.toString());
};

async函数就是将generator函数的星号(*)换成async,将yield替换成await。

async函数对generator函数进行改进,体现以下四点。

(1)内置执行器。

generator函数的执行必须依靠执行器,而async函数自带执行器,也就是说,async函数的执行与普通函数一模一样,只要一行。

下面代码调用了asyncReadFile函数,然后就会自动执行,输出最后的结果。这个完全不像generator函数,需要调用next方法,才能得到最终的结果。

var result=asyncReadFile();

(2)更好的语义

async和await,比起星号(*)和yield,语义更清楚。async表示函数中有异步操作,await表示紧跟其后的表达式需要等待结果。

(3)更广的适用性

yield命令后面只能是Thunk函数或者promise对象,而async函数的await命令后面,可以是promise对象和原始类型的值(数值,字符串和布尔值,但这等同于同步操作)

(4)返回值是promise

async函数的返回值是promise对象,执行generator函数返回一个遍历器对象(Iterator对象)方便多了,也就是说,async函数可以看做是多个异步操作,包装成一个promise对象,而await命令是内部then命令的语法糖。

2、用法

2.1基本用法

async函数返回的是一个promise对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

举一个栗子

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint(‘hello world‘, 5000);

上面代码指定5秒后输出hello world。

async函数多种使用形式

//函数声明
async function foo() {}

//函数表达式
const foo = async function () {}

//对象的方法
let obj = { async foo() {} }
obj.foo().then(...)

//箭头函数
const foo = async () => {};

//class方法
class Storage {
  constructor() {
    this.cachePromise = caches.open(‘avatars‘);
  }

  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}

3、语法

async函数的语法规则总体上比较简单,难点是错误处理机制。

3.1返回的promise对象

async函数返回的是promise对象。

async函数内部return语句返回值,会成为then方法回调函数的参数

async function f() {
  return ‘hello world‘;
}

f().then(v => console.log(v))

上面代码中,函数f内部return 命令返回值,会被then方法回调函数接收到。输出“hello world”。

async函数内部抛出的错误,会导致返回的promise对象变成reject状态。抛出的错误对象会被catch方法回调函数接收到。

3.2promise对象状态变化 

async函数返回的promise对象,必须等到内部的所有的await命令后边的promise对象执行完,才会发生状态的改变,除非遇到return语句或者抛出错误。也就是说,只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数。

举个栗子

async function getTitle(url) {
  let response = await fetch(url);
  let html = await response.text();
  return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle(‘https://tc39.github.io/ecma262/‘).then(console.log)

上面代码中,函数getTitle内部有三个操作:抓取网页,取出文本,匹配页面标题。只有三个操作全部完成,才会执行then方法里面console.log。

3.3 await命令 

正常情况下,await命令后边是一个promise对象。如果不是,会被转成一个一个立即resolve的promise对象。

async function f() {
  return await 123;
}

f().then(v => console.log(v))

上面代码中,await命令的参数是数值123,他被转成promise对象,并立即resolve。

await命令后边的promise对象如果变成reject状态,则reject的参数会被catch方法的回调函数接收到。

举个栗子

async function f() {
  await Promise.reject(‘出错了‘);
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))

上面代码中,await语句前面没有return,但是reject方法的参数依然传入catch方法的回调函数,这里如果在wawait前面加上return,效果是一样的。

只要一个await语句后面的promise变成了reject,那么整个async函数都会中断执行。

async function f() {
  await Promise.reject(‘出错了‘);
  await Promise.resolve(‘hello world‘); // 不会执行
}

上面代码中,第二个await语句是不会执行的,因为第一个await语句状态变成了reject

时间: 2024-10-01 10:21:46

ECMAScript 6 学习(二)async函数的相关文章

js-ES6学习笔记-async函数(3)

1.await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中. 2.多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发. // 写法一 let [foo, bar] = await Promise.all([getFoo(), getBar()]); // 写法二 let fooPromise = getFoo(); let barPromise = getBar(); let foo = await

js-ES6学习笔记-async函数

1.async 函数是 Generator 函数的语法糖.前文有一个 Generator 函数,依次读取两个文件. var fs = require('fs'); var readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(error, data) { if (error) reject(error); resolve(dat

OpenCV for Python 学习 (二 事件与回调函数)

今天主要看了OpenCV中的事件以及回调函数,这么说可能不准确,主要是下面这两个函数(OpenCV中还有很多这些函数,可以在 http://docs.opencv.org/trunk/modules/highgui/doc/user_interface.html 找到,就不一一列举了),然后自己做了一个简单的绘图程序 函数如下: cv2.setMouseCallback(windowName, onMouse[, param]) cv2.createTrackbar(trackbarName,

多线程编程学习笔记——async和await(二)

接上文 多线程编程学习笔记——async和await(一) 三.   对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步调用 . 1.示例代码如下. using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Thread

05-js的函数学习二.html

第一部分: <html> <head> <title>js的函数学习</title> <meta charset="UTF-8"/> <!-- test,1-2, test(1,2) js的函数学习一: 作用:功能代码块的封装.减少代码的冗余. 1.函数的声明: 方式一:function 函数名(形参名1,形参名2……){执行体} 方式二:var 函数名=new Function("形参1",&quo

async 函数--学习笔记一

含义: ES2017 标准引入了 async 函数,使得异步操作变得更加方便.async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator 函数,依次读取两个文件. var fs = require('fs'); var readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(erro

linux shell学习笔记二---自定义函数(定义、返回值、变量作用域)介绍

linux shell 可以用户定义函数,然后在shell脚本中可以随便调用.下面说说它的定义方法,以及调用需要注意那些事项. 一.定义shell函数(define function) 语法: [ function ] funname [()] { action; [return int;] } 说明: 1.可以带function fun() 定义,也可以直接fun() 定义,不带任何参数. 2.参数返回,可以显示加:return 返回,如果不加,将以最后一条命令运行结果,作为返回值. retu

ES6学习笔记(四)—— async 函数

await 是 async wait 的简写, 是 generator 函数的语法糖. async 函数的特点: async 声明一个方法是异步的,await 则等待这个异步方法执行的完成 asyncReadFile = async function () { var f1 = await readFile('/etc/fstab') var f2 = await readFile('/etc/shells') console.log(f1.toString()) console.log(f2.

多线程编程学习笔记——async和await(三)

接上文 多线程编程学习笔记——async和await(一) 接上文 多线程编程学习笔记——async和await(二) 五.   处理异步操作中的异常 本示例学习如何在异步函数中处理异常,学习如何对多个并行的异步操作使用await时聚合异常. 1.程序示例代码如下. using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;