JS Promisify 在浏览器中

在浏览器中使用 JavaScript 编写的异步操作很常见。一些 JavaScript 函数不是同步执行的，并且可能需要在数据加载完成后触发回调函数。有时候需要等待两个不同的异步操作完成后处理结果。最近，一个流行的方法是使用 Promisify。

Promisify 是什么？

Promisify 是一个函数，它将接受回调函数的函数转换为返回 Promise 的函数。这意味着您可以使用 async / await 语法编写异步代码，而不必编写像回调链那样的代码。

在浏览器中使用 Promisify

在浏览器中，您可以使用 Promisify 错误来避免嵌套的回调。下面是一个基本示例：

function promisify(fn) {
  return function(...args) {
    return new Promise((resolve, reject) => {
      fn(...args, (err, result) => {
        if (err) {
          reject(err);
        } else {
          resolve(result);
        }
      });
    });
  };
}

在此示例中，将接受回调的函数转换为返回 Promise 的函数。在返回 Promise 函数的结构中，我们将原始函数的参数提取到可变参数列表中，然后返回 Promise。在 Promise 的构造函数中，我们调用原始函数，并将原始函数的回调转换为 Promise。

const exampleCallback = (input, callback) => {
  setTimeout(() => {
    if (input % 2 === 0) {
      const data = {
        data: 'success'
      };
      callback(null, data);
    } else {
      callback('invalid input');
    }
  }, 1000);
};

const examplePromisified = promisify(exampleCallback);

使用 Promisify

使用 Promisify 的主要好处是您可以使用 async / await 语法编写异步代码，而不必编写像回调链那样的代码。下面是一个使用 Promisify 的代码片段：

(async () => {
  const result = await examplePromisified(2);
  
  console.log('result =', result);
})().catch((err) => {
  console.error('error =', err);
});

这段代码的输出应该是：

result = { data: 'success' }

结论

使用 Promisify 可以让您减少嵌套的回调，并使用 async / await 等更流畅的语法来组织异步流程。在浏览器端，我们可以自己构建一个简单的 Promisify 实现来支持此功能。