async函数

ES2017 标准引入了 async 函数,使得异步操作变得更加方便。

async 函数是 Generator 函数的语法糖

什么是语法糖?

意指那些没有给计算机语言添加新功能,而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式,有益于更好的编码风格,更易读。不过其并没有给语言添加什么新东西

async函数使用时就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已

async函数对 Generator 函数的区别:

(1)内置执行器。

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

(2)更好的语义。

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

(3)正常情况下,await命令后面是一个 Promise 对象。如果不是,会被转成一个立即resolve的 Promise 对象。

(4)返回值是 Promise。

async函数的返回值是 Promise 对象,这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

进一步说,async函数完全可以看作多个异步操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖。

用法如下:

let task1 = function(){
return new Promise((res, rej)=>{
setTimeout(() => {
res("完成task1");
}, 1000);
});
}
let task2 = function(str){
return new Promise((res, rej)=>{
setTimeout(() => {
res(str+"完成task2");
}, 2000);
});
}
let task3 = function(str){
return new Promise((res, rej)=>{
setTimeout(() => {
res(str+"完成task3");
}, 3000);
});
}
async function f() {
let t1 = await task1(); //在这里await返回的是promise中resolve方法的参数
console.log(t1, typeof t1); //完成task1 string
let t2 = await task2(t1);
console.log(t2);
return task3(t2); //最后用return,表示将结果作为返回的Promise对象的resolve的参数
}
f().then(data=>{console.log(data)}); //完成task1完成task2完成task3

错误处理

如果await后面的异步操作出错,那么等同于async函数返回的 Promise 对象被reject。防止出错的方法,也是将其放在try...catch代码块之中。

async function main() {
try {
const val1 = await firstStep();
const val2 = await secondStep(val1);
const val3 = await thirdStep(val1, val2); console.log('Final: ', val3);
}
catch (err) {
console.error(err);
}
}

Module

ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";。

模块功能主要由两个命令构成:export和import。

export命令用于规定模块的对外接口。

import命令用于输入其他模块提供的功能。

export

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

export输出遍历的写法一:

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

写法二(推荐):

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958; export {firstName, lastName, year};
//跟上面写法等价,推荐这种写法。

可以使用as关键字重命名:

function v1() { ... }
function v2() { ... } //export 内部参数 as 外部调用名
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};

export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
//上面代码输出变量foo,值为bar,500 毫秒之后变成baz。

export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,下面的import命令也是如此。

import

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

下面代码的import命令,用于加载profile.js文件,并从中输入变量。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

// main.js
import {firstName, lastName, year} from './profile';

如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。

//import 外部变量 as 内部参数
import { lastName as surname } from './profile';

注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。

foo();

import { foo } from 'my_module';
//import的执行早于foo的调用。这种行为的本质是,import命令是编译阶段执行的,在代码运行之前。

除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。注意,模块整体加载所在的那个对象,不允许运行时改变。下面的写法都是不允许的。

import * as circle from './circle';

// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

export default

使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。

为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。

// export-default.js
export default function () {
console.log('foo');
}

其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

export default命令用在非匿名函数前,也是可以的。下面代码中,foo函数的函数名foo,在模块外部是无效的。加载的时候,视同匿名函数加载。

// export-default.js
export default function foo() {
console.log('foo');
} // 或者写成
function foo() {
console.log('foo');
}
export default foo;

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能唯一对应export default命令。

前端知识点回顾之重点篇——ES6的async函数和module的更多相关文章

  1. 前端知识点回顾之重点篇——ES6的Promise对象

    Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异 ...

  2. 前端知识点回顾之重点篇——ES6的Iterator和Generator

    Iterator 迭代器是一种接口.是一种机制. 为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). Iter ...

  3. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  4. 前端知识点回顾之重点篇——CSS中flex布局

    flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素 ...

  5. 前端知识点回顾之重点篇——jQuery实现的原理

    jQuery jQuery的实现原理 参考:https://blog.csdn.net/zhouziyu2011/article/details/70256659 外层沙箱和命名空间$ 为了避免声明了 ...

  6. 前端知识点回顾之重点篇——CORS

    CORS(cross origin resource sharing)跨域资源共享 来源:http://www.ruanyifeng.com/blog/2016/04/cors.html 它允许浏览器 ...

  7. 前端知识点回顾之重点篇——AJAX

    Ajax(Asynchronous JavaScript and XML) 这种技术就是无须刷新页面即可从服务器中取得数据,但不一定是XML数据.在原生方法上,Ajax技术的核心是XMLHttpReq ...

  8. 前端知识点回顾之重点篇——JavaScript异步机制

    JavaScript异步机制 来源:https://www.cnblogs.com/zhaodongyu/p/3922961.html JavaScript是单线程异步执行的,单线程意味着代码在任务队 ...

  9. 前端知识点回顾之重点篇——CSS中的BFC

    BFC布局(Block Formatting Contexts) 来源:https://www.cnblogs.com/lzbk/p/6057097.html 块级格式化上下文是页面中的一块渲染区域, ...

随机推荐

  1. Oracle问题总结

    1.账号锁定了 2.忘记密码 3.Oracle create session权利 4.oracle中单引号和双引号的作用 5.不支持 insert into tableName values (... ...

  2. easyUi的组合表格

    公司之前的项目是用easyui写的里面还混搭着php...把分支下来,有点蒙.晚上回来恶补一下吧,今天渲染这个表格,我开始自己写假数据,然后用ajax操作再使用 obj.datagrid('loadD ...

  3. CAFFE(四):Ubuntu 下安装jupyter notebook

    第一步.安装 pycaffe notebook 接口环境 在上一步成功安装 caffe 之后,就可以通过 caffe 去做训练数据集或者预测各种相关的事了,只不过需要在命令行下通过 caffe 命令进 ...

  4. Zabbix4.2Server端部署

    一.安装 1.前期安装准备 前期准备一个大一点的分区准备用于zabbix 数据库的存放,为方便后期扩容,我们在这里选择新加一个磁盘并以LVM的方式进行挂载(此处省略虚拟机添加硬盘等操作) # df - ...

  5. Python Flask学习笔记(1)

    1.搭建虚拟环境 a. 安装 virtualenv : pip3 install virtualenv b. 建立虚拟环境 : 任意目录下建立一个空文件(我的是 Py_WorkSpace) ,在该文件 ...

  6. 【测试代码执行时间】console.time + console.timeEnd 打印输出耗时

    // 计时开始,内部文字为计时ID,开始要和结束保持一致 console.time('计时器1') // 需要测试执行时间的代码 for (let index = 0; index < 1000 ...

  7. asp.net 各种文件解析探索

    aspx ascx ashx 等等 准备写一个专题 还望各位批评指正,共同学习

  8. es高级用法之冷热分离

    背景 用户需求:近期数据查询速度快,较远历史数据运行查询速度慢? 对于开发人员而言即数据的冷热分离,实现此功能有2个前提条件: 硬件:处理速度不同的硬件,最起码有读写速度不同的硬盘,如SSD.机械硬盘 ...

  9. NPM酷库:jsdom,纯JS实现的DOM

    NPM酷库,每天两分钟,了解一个流行NPM库. 昨天认识了一个在Node.js环境下操作HTML的库 cheerio,cheerio实现了jQuery接口,用起来十分方便.为什么不直接用jQuery呢 ...

  10. 简单的理解 StringBuffer/StringBuilder/String 的区别

    StringBuffer/StringBuilder/String 的区别 这个三类之间主要的区别:运行速度,线程安全两个方面. 速度方面(快到慢): StringBuilder > Strin ...