作者: Bruski
时间: 2020/08/20
文章主要介绍 JS运行的两种方式、Generator的用法、以及Async-Await与生成器的关系
JavaScript两种运行方式
同步模式,优点:易读,简单,缺点:遇到耗时操作会导致阻塞,卡死,此时就需要将耗时任务用异步的方式执行
console.log("global begin"); // 调用1
function bar() {
console.log("bar task");
}
function foo() {
console.log("foo task");
bar(); // 调用3
}
foo(); // 调用2
console.log("global end"); // 调用4
异步模式,主要通过JS的事件循环机制,结合调用栈
、消息队列
、WebAPI线程
三者实现。
console.log("global begin"); // 调用1,执行1
// 调用2,开启计时器1
setTimeout(function timer1() {
console.log("timer1 invoke");
}, 1800);
// 调用3,开启计时器2
setTimeout(function timer2() {
console.log("timer2 invoke");
setTimeout(function inner() {
console.log("inner invoke");
}, 700);
}, 1000);
// 调用4,执行2
console.log("global end");
Generator 生成器用法
假设有个异步方法
function ajax(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "json";
xhr.onload = function () {
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
xhr.send();
});
}
可以用生成器去编排多个异步任务
// 定义生成器函数
function* main() {
try {
const users = yield ajax("/api/users.json");
console.log(users);
const users2 = yield ajax("/api/users1.json");
console.log(users2);
} catch (e) {
console.log(e);
}
}
通过调用生成器的next方法,依次执行异步任务
const g = main(); // 创建生成器对象
const result = g.next(); // 拿到异步promise
result.value.then(function (data) {
// 定义成功回调,此处的值会在main中的第二个yield处获取到
g.next(data);
});
上面是手动一个个调用,如果改用递归调用实现就会很方便
// 递归实现
function handleResult(res) {
if (res.done) return;
res.value.then(
(data) => handleResult(g.next(data)), // 生成器传值,实现异步串行调用
(err) => g.throw(err) // 生成器抛出错误的方法
);
}
handleResult(g.next());
ES2017中新增的async-await语法,就是在语言层面对生成器做了语法糖,方便理解和使用,我们对比一下两者。
// async 方案
async function main1() { // 是不是就是 function* main1()?
try {
const users = await ajax("/api/users.json"); // 是不是就是 yield?
console.log(users);
const users2 = await ajax("/api/users1.json");
console.log(users2);
} catch (e) {
console.log(e);
}
}
main1(); // 但这里调用比下面要简单的多,不必重复写递归调用的函数
// ========
// 生成器方案
function* main() {
try {
const users = yield ajax("/api/users.json");
console.log(users);
const users2 = yield ajax("/api/users1.json");
console.log(users2);
} catch (e) {
console.log(e);
}
}
const g = main();
function handleResult(res) {
if (res.done) return;
res.value.then(
(data) => handleResult(g.next(data)), // 生成器传值,实现异步串行调用
(err) => g.throw(err) // 生成器抛出错误的方法
);
}
handleResult(g.next());
会发现,async-await真的就是generator-yield的包装,不管从理解还是使用上都极大的方便了开发者,让我们能摆脱回调地域,以平铺直叙的思维编写逻辑。