日记

日记

  • Diary
  • GitHub

›All Blog Posts

All Blog Posts

  • 再看高程3
  • 面试
  • 个人简历
  • react的高性能
  • webpack源码学习
  • 树莓派
  • 布局
  • 模块化
  • 攻击与安全
  • 异步
  • TODO
  • React状态管理比较
  • 性能优化
  • HTTP缓存
  • (译)JS中数据的改变与发现
  • CSS杂记
  • XML与SVG
  • 个人简历
  • Workspaces是什么
  • NPM包测试之低高级策略
  • 谈谈version
  • 减肥之道
  • 问题汇总
  • 一个nginx配置
  • 好用的工具
  • 好用的npm包
  • 流行框架学习对比

异步

June 25, 2018

Shiyong Yin

异步方式

  • 回调
  • 监听函数
  • 发布/订阅
  • Promise
  • generator
  • async

async与generator区别

async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。 async函数对 Generator 函数的改进,体现在以下四点。

(1)内置执行器。

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

asyncReadFile(); 上面的代码调用了asyncReadFile函数,然后它就会自动执行,输出最后结果。这完全不像 Generator 函数,需要调用next方法,或者用co模块,才能真正执行,得到最后结果。

(2)更好的语义。

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

(3)更广的适用性。

co模块约定,yield命令后面只能是 Thunk 函数或 Promise 对象,而async函数的await命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时会自动转成立即 resolved 的 Promise 对象)。

(4)返回值是 Promise。

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

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

神视频

loupe

Promise

异步习题

为什么最后打印a end ? await会一直阻塞下去,直到线程中所有代码执行完毕?!


async function a() {
  console.log('a start');
  let c = await b();
  console.log('a end');
}

async function b() {
  console.log('b start');
  return 12;
}
async function c() {
  console.log('c start');
  let c = await d();
  console.log('c end');
}

async function d() {
  console.log('d start');
  return 12;
}
// a start
// b start
// c start
// d start
// script start
// promies1
// script end
// promise2
// promise3
// promise4
// a end
// c end
// timeout

a(); 
c();
setTimeout(function () {
  console.log('tiemout');
}, 0);
console.log('script start');
new Promise(function (resolve) {
  console.log('promise1');
  resolve();
}).then(function () {
  console.log('promise2');
  new Promise(function (resolve) {
    console.log('promise3');
    resolve();
  }).then(function () {
    console.log('promise4');
  });
});

console.log('script end');

Recent Posts
  • 异步方式
    • async与generator区别
  • Promise
  • 异步习题
Copyright © 2018-2019 Shiyong Yin