JS 异步编程之四:理解异步函数(AsyncFunction)
作者:nunumick 发布时间:10 Sep 2017 分类: front-end
有了前序内容的了解,再来看 async 函数和 await 关键字,会更容易理解他们的本质。
官方 demo 代码:
/**
* case from mdn
*/
function resolveAfter2Seconds(x) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
async function f1() {
const x = await resolveAfter2Seconds(10);
console.log(x); // 10
}
f1();
新的武器
使用 async & await 处理之前的代码,替换 generator 和 yield,async 函数等价于自带 co 执行器的 generator 函数。
标签:
javascript
,
es2017
,
async
,
await
<<< EOF
JS 异步编程之三:理解 Co.js
作者:nunumick 发布时间:05 Aug 2017 分类: front-end
Co.js 是 TJ 大神基于 Generator 特性写的 js 库,可以用同步的方式编写和执行异步函数,核心代码只有几十行。
其本质上就是一个迭代器的执行函数,来看下面个人仿制的简写代码,理解精髓即可:
// 定义一个生成器,包含我们要用到的异步函数
const gen = function* () {
let a = yield new Promise((resolve, reject) => {
setTimeout(() => {
resolve(10);
}, 1000);
});
let b = yield new Promise((resolve, reject) => {
setTimeout(() => {
resolve(20);
}, 2000);
});
let c = yield new Promise((resolve, reject) => {
setTimeout(() => {
resolve(15);
}, 1000);
});
let d = yield 5;
let e = a + b + c + d;
console.log(e);
return e;
};
//编写一个递归执行的通用迭代器执行函数
//第一个入参为要执行的生成器,第二入参为 next 赋值
const iter = function (gen, value) {
let item = gen.next(value);
let v = item.value;
console.log(item);
if (item.done) return Promise.resolve(v);
//这一步很关键,如果是异步函数,则返回v.then
if (v instanceof Promise) {
return v.then((res) => {
return iter(gen, res);
});
} else {
console.log(v);
return iter(gen, v);
}
};
//co就是对执行器的再一次包装
const co = function (gen) {
let g = gen();
return iter(g);
};
//test
co(gen).then((res)=>{
console.log(res);
})
用 co 重写代码
有了这个可重用的便捷的 co 执行器,我们可以用它来重写上一篇理解生成器(generator) 文中的样例代码,替换掉手动逐行执行的那部分。
标签:
javascript
,
co
<<< EOF
JS 异步编程之二:理解生成器(Generator)
作者:nunumick 发布时间:25 Jul 2017 分类: front-end
上篇学习了迭代器的应用原理,我们知道可以用生成器(generator)来返回迭代方法,简化对象迭代器的实现。这篇我们学习生成器的相关知识点。
先来看下官方定义:
The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol. Generator is a subclass of the hidden Iterator class.
可知 Generator 对象是迭代器的子类,同样遵循迭代协议。其作用就是用于生成迭代方法。
虽然自定义迭代器是一个有用的工具,但由于需要显式地维护其内部状态,因此创建时要格外谨慎。生成器函数(Generator 函数)提供了一个强大的替代选择:它允许你定义一个非连续执行的函数作为迭代算法。生成器函数使用 function* 语法编写。
//生成器函数内部每个yield语句定义了生成器暂停执行并返回值给调用者的一个点。
//当生成器恢复执行时,它会从暂停处继续,保持其内部状态不变。
function* geA() {
yield "a1";
yield "a2";
yield "a3";
yield "a4";
}
//显式调用geA()返回的迭代器对象
//自动反复调用其.next()方法,直到迭代器耗尽(即.next().done为true)
for (let item of geA()) {
console.log(item);
}
/**
* output:
a1
a2
a3
a4
*/
异步编程
JS 的异步函数并不会阻塞代码执行顺序,想要通过按照异步函数编写的顺序来实现同步的执行结果并不容易。
标签:
javascript
,
ecma
,
es6
,
generator
<<< EOF
JS 异步编程之一:理解迭代器(Iterator)
作者:nunumick 发布时间:18 Jul 2017 分类: front-end
ES2017(ES8)发布了 async functions 和 await 关键字等特性,极大提升了编写异步程序的便利性和代码简洁度,应该说 async & await 是一种新的语法糖,为了说明这一点,我们可以将时间回调到 ES2015(ES6)的特性发布,逐一理解 iterator、generator 以及 TJ 大神写的中间产物 co库 的应用原理,进而了解 async functions 的本质。
可迭代对象
ES6 中引入了迭代器和可迭代对象(iterable)的概念,并且提供了对可迭代对象的相关支持,如 for…of 循环,本质上一个可迭代对象就是内置了迭代器方法的对象,因此可以说任何对象都能够被迭代,不仅仅是数组。
//创建一个名为arr的数组,并给它添加一个额外属性name。
const arr = [1, 2, 3, 4, 5];
arr.name = "test arr";
//使用传统的for循环遍历数组,通过索引访问并打印数组元素。
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//使用for...of循环遍历数组。for...of适用于可迭代对象,自动调用其内置迭代器来获取每个元素。
for (let item of arr) {
console.log(item);
}
//@@iterator
//数组都有内置迭代器方法,该方法由Symbol.iterator属性提供,返回一个迭代器对象。
console.log(arr[Symbol.iterator]);
//显式调用数组的Symbol.iterator方法并立即使用返回的迭代器对象进行遍历。
//这与直接使用for...of循环效果相同。
for (let item of arr[Symbol.iterator]()) {
console.log(item);
}
迭代协议
迭代器是遵循了迭代协议的对象,协议规定迭代器必须实现 next() 接口,它应该返回当前元素并将迭代器指向下一个元素,返回的对象格式为 {value:元素值, done:是否遍历结束},其中,done 是一个布尔值。done 属性为 true 的时候,我们默认不会去读取 value, 所以最后返回的经常是 {value: undifined, done: true}
我们可以利用迭代协议规则,手动执行迭代,或者重写对象的迭代逻辑。
标签:
javascript
,
ecma
,
es6
,
iterator
<<< EOF
前端系统初始化-我的常用工具
作者:nunumick 发布时间:23 Jan 2015 分类: developer
每次换电脑总是要走一遍繁琐的软件安装和开发环境初始化流程,在mac上安装软件、命令行工具时不时会碰到问题,在又一次经历了这个过程之后,我决定把常用软件及开发环境记录下来,以绝后患。
brew
mac 上强力资源管理工具,用的是HomeBrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"nodejs
无需多说,官网下载安装:nodejs.org
接着可以装一些 node 常用工具
java-jdk
无需多说,官网下载安装:jdk download
git
安装git
brew install git常规配置
git config --global alias.st 'status'
git config --global alias.ci 'commit'
git config --global alias.br 'branch'
git config --global alias.co 'checkout'
git config --global alias.lg 'log'
git config --global user.name 'name'
git config --global user.email 'email'ssh配置
从个人仓库同步 .ssh 到本机相同目录下即可
svn
brew install --universal --java subversionzsh
比较好用的shell,可以简化不少操作,自动补全,颜色高亮,还能识别git仓库