标签：异步

解决 Firefox 下的 race 问题
我厂有几个产品，需要从后端获取大量的信息，为了让用户能够近乎实时的看到这些信息，大部分数据都是通过 WebSocket 发给前端。这些产品在 Chrome 下表现正常，但是在 Firefox 下经常把数据格式搞乱，最终渲染失败。

因为 Firefox DevTools 没法解析 WebSocket 数据，而且市场占有率比较低，所以我一直没有解决这个问题。前几天终于把最小可复现实例搞出来，正准备研究，结果同事已经修好了。

预览版的 Firefox 终于可以在 DevTools 里查看 WebSocket 每一帧的数据，所以她尝试看了一下，发现从解析二进制数据的角度来看，Firefox 应该没问题。于是又回到代码，发现了一个可能产生 race 的点：
```
if (data instanceof Blob) {
  data = await new Response(data).arrayBuffer();
}
```
因为服务器返回的数据是二进制，所以我需要进行一次转换，把它变成 ArrayBuffer，然后再通过 TextDecoder 转换成文本，然后处理。Response.arrayBuffer 返回的是 Promise，所以我就很自然的用 await，并且在 Chrome 上运行良好。

但是在 Firefox 里，某些帧会后发先完成转换，a b c 变成 a c b，于是数据格式错乱，无法正常解析。我怀疑 Chrome 并没有真的把这一步保留到用户，而是同时存了两份数据，这样转换的时候直接给出数据就好，所以是微任务，不走 Event loop，不会产生 race。而 Firefox 则是实时转换，所以是宏任务，所以出问题。

我尝试去翻了一下源码，无奈平时没看过，所以没能找到证据。如果有哪位同学刚好知道，可以在评论里告诉我。
2019年11月1日
【修正】Promise N种用法-异步回调的问题-findLargest 解析

做慕课视频的时候，仔细琢磨了一下，发现之前讲的还是有问题，所以重新录了一遍。

（更多…）

2017年6月18日
Node.js 8 中的 util.promisify
Node.js 8 于上个月月底正式发布，带来了很多新特性。其中比较值得注意的，便有 util.promisify() 这个方法。

如果你已经很熟悉 Promise，请继续往下看。如果你还不熟悉 Promise，可以先跳过去看下下章：Promise 介绍。

util.promisify()

虽然 Promise 已经普及，但是 Node.js 里仍然有大量依赖回调的异步函数，如果我们把每个函数都封装一遍，那真是齁麻烦齁麻烦的，比齁还麻烦。

所以 Node.js 8 就提供了 util.promisify() 这个方法，方便我们把原来的异步回调方法改成支持 Promise 的方法，接下来，想继续 .then().then().then() 搞队列，还是 await 就看实际需要了。

我们看下范例，让读取目录文件状态的 fs.stat 支持 Promise：
```
const util = require('util');
const fs = require('fs');

const stat = util.promisify(fs.stat);
stat('.')
  .then((stats) => {
    // Do something with `stats`
  })
  .catch((error) => {
    // Handle the error.
  });
```
怎么样，很简单吧？按照文档的说法，只要符合 Node.js 的回调风格，所有函数都可以这样转换。也就是说，只要满足下面两个条件，无论是不是原生方法，都可以：
1. 最后一个参数是回调函数
2. 回调函数的参数为 (err, result)，前面是可能的错误，后面是正常的结果
结合 Await/Async 使用

同样是上面的例子，如果想要结合 Await/Async，可以这样使用：
```
const util = require('util');
const fs = require('fs');

const stat = util.promisify(fs.stat);
async function readStats(dir) {
  try {
    let stats = await stat(dir);
    // Do something with `stats`
  } catch (err) { // Handle the error.
    console.log(err);
  }
}
readStats('.');
```
自定义 Promise 化处理函数

那如果现有的使用回调的函数不符合这个风格，还能用 util.promisify() 么？答案也是肯定的。我们只要给函数增加一个属性 util.promisify.custom，指定一个函数作为 Promise 化处理函数，即可。请看下面的代码：
```
const util = require('util');

// 这就是要处理的使用回调的函数
function doSomething(foo, callback) { 
  // ...
}

// 给它增加一个方法，用来在 Promise 化时调用
doSomething[util.promisify.custom] = function(foo) { 
  // 自定义生成 Promise 的逻辑
  return getPromiseSomehow(); 
};

const promisified = util.promisify(doSomething);
console.log(promisified === doSomething[util.promisify.custom]);
// prints 'true'
```
如此一来，任何时候我们对目标函数 doSomething 进行 Promise 化处理，都会得到之前定义的函数。运行它，就会按照我们设计的特定逻辑返回 Promise 实例。

我们就可以升级以前所有的异步回调函数了。

（更多…）
2017年6月10日
使用 Promise 封装 FileReader
Promise 在处理异步的时候是个很好的选择，可以减少嵌套层次，让代码更好读，逻辑更清晰。ES6 将其加入规范，jQuery 3.0 也修改实现向规范靠拢（3.0 发布公告）。一些新增元素比如 .fetch() 原生就 “thenable”，不过大多数以往的 API 还要依赖回调，这个时候，我们只要将它们重新封装，就能避开嵌套陷阱，享受 Promise 带来的愉悦体验。

Promise 一般用法

先来看下 Promise 的一般用法。
```
// 声明 Promise 对象
var p = new Promise(function (resolve, reject) {
  // 不管啥时候，该执行then了，就调用 resolve
  setTimeout(function () { 
    resolve(1);
  }, 5000);

  // 或者不管啥问题，就调用 reject
  if (somethingWrong) {
    reject('2');
  }      
});

// 使用 Promise 对象
p.then(function (num) {
  // 对应上面的 resolve
  console.log(num); // 1
}, function (num) {
  // 对应上面的 reject
  console.log(num); // 2
});
```
Promise 的驱动模型并不复杂：任何操作，假定它只有两个结果，成功或者失败。那么只需要在合适的时间调用合适的程序，进入合适的后续步骤即可。.then() 顾名思义，就是下一步的意思，当前面的 Promise 有了结果——即调用 resolve 或者 reject——之后，就启动对应的处理函数。

Promise 实例创建后就会开始执行，判定结果需要我们自己来，比如加载成功，或者满足某个条件，等等。通过串联 .then() 则可以完成一系列操作。每次调用 .then() 都会创建一个新的 Promise 实例，它会静静等待前面的实例状态改变后再开始执行。

封装 FileReader

接下来开始封装。思路很简单，FileReader 除了提供各种 read 方法，还有几个事件钩子，其中 onerror 和 onload 很明显可以作为判断任务是否完成的依据。加载成功的话，就需要用到文件内容，所以将文件或文件内容传递到下一步也十分必要。

最后完成的代码如下：
```
function reader (file, options) {
  options = options || {};
  return new Promise(function (resolve, reject) {
    let reader = new FileReader();

    reader.onload = function () {
      resolve(reader);
    };
    reader.onerror = reject;

    if (options.accept && !new RegExp(options.accept).test(file.type)) {
      reject({
        code: 1,
        msg: 'wrong file type'
      });
    }

    if (!file.type || /^text\//i.test(file.type)) {
      reader.readAsText(file);
    } else {
      reader.readAsDataURL(file);
    }
  });
}
```
为了能真正派上用场，里面还有一些验证文件类型的操作，不过跟本文主旨无关，略过不表。这段代码的核心是创建一个 Promise 对象，等待 FileReader 读取完成后调用 resolve 方法，或者出现问题时调用 reject 方法。

Github Gist 里也放了一份。

使用刚才封装好的函数

接下来就可以在项目中使用了：
```
reader(file)
  .then(function (reader) {
    console.log(reader.result);
  })
  .catch(function (error) {
    console.log(error);
  });
```
.then() 支持两个参数，第一个在 Promise 成功时启动，第二个自然在失败时启动。用 .catch() 可以实现同样地效果。Promise 的好处除了可读性更佳以外，返回的 Promise 对象还可以任意传递，继续进行链式调用，有很大想象空间。

继续 .then()

于是我们不妨串联更多操作（本来想写个断点续传的，回头再说吧）：
```
reader(file)
  .then(function (reader) {
    return new Promise(function (resolve, reject) {
      // 就随便暂停个5秒吧……
      setTimeout(function () {
        resolve(reader.result); 
      }, 5000);
    });
  })
  .then(function (content) {
    console.log(content);
  });
```
总结

这其实是我第一次用 Promise，上次翻译 jQuery 发布公告的时候我它也只是一知半解，对它的解读也糊里糊涂。我很喜欢在业余项目中学习使用新技术，最近开发 Chrome 插件的时候就尝试了一把，感觉不错。使用过程比我想象的复杂也比我想象的简单，这套设计很棒，能解决不少实际问题，也给了我很大启发，将来我应该会把很多地方的实现都做这样的修改。

参考文献

除去第一段的各个链接，还有一些文章值得一看。

ECMAScript 6 入门：Promise 对象
2016年2月17日