JavaScript异步编程小记

作者: 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的包装,不管从理解还是使用上都极大的方便了开发者,让我们能摆脱回调地域,以平铺直叙的思维编写逻辑。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值