JavaScript 异步函数 Promisification 处理详情

前言：

Promisification 是一个很长的词，表示一个编程范式的转变，即将接受回调的函数转换为一个返回类型为 Promise 的函数。

我们现实的开发项目中经常需要这种转换，因为许多函数和库都是基于回调的，但是 Promise 更方便，所以对它们进行 Promisification 处理是有意义的。

下面是一个简单的例子：

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`Script load error for ${src}`));

  document.head.append(script);
}

这段代码，动态创建一个 script 元素，待其加载完毕后，会触发 onload 事件指定的回调函数。

运行时，loadScript 的调用者，负责指定回调函数：

loadScript('path/script.js', (err, script) => {...})

下面我们将会对这个函数进行 Promisification 改造。

我们将创建一个新函数 loadScriptPromise(src)，它执行相同的操作（加载脚本），但返回一个 Promise 而不是使用回调。

换句话说，我们只传递 src （没有回调）并得到一个 Promise 作为返回参数，当加载成功时使用创建并加载好的 script 进行 resolve，否则通过 reject 抛出错误。

改造后的函数：

let loadScriptPromise = function(src) {
  return new Promise((resolve, reject) => {
    loadScript(src, (err, script) => {
      if (err) reject(err);
      else resolve(script);
    });
  });
};

消费代码：

loadScriptPromise('path/script.js').then(...)

正如我们所见，新函数是原始 loadScript 函数的包装器。

在实践中，我们可能需要 Promisify 多个函数，所以构造一个 helper 函数显得更有意义。

我们称这个函数为 promisify(f)：它接受一个准备被改造成 Promise 的函数 f， 并返回一个 wrapper 函数。

完整实现如下：

function promisify(f) {
  return function (...args) { // return a wrapper-function (*)
    return new Promise((resolve, reject) => {
      function callback(err, result) { // our custom callback for f (**)
        if (err) {
          reject(err);
        } else {
          resolve(result);
        }
      }
      args.push(callback); // append our custom callback to the end of f arguments

      f.call(this, ...args); // call the original function
    });
  };
}

消费代码：

let loadScriptPromise = promisify(loadScript);
loadScriptPromise(...).then(...);

到此这篇关于JavaScript 异步函数 Promisification 处理详情的文章就介绍到这了,更多相关JavaScript Promisification 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript队列函数和异步执行详解

    编辑注:在Review别人的JavaScript代码时曾看到过类似的队列函数,不太理解,原来这个是为了保证函数按顺序调用.读了这篇文章之后,发现还可以用在异步执行等. 假设你有几个函数fn1.fn2和fn3需要按顺序调用,最简单的方式当然是: fn1(); fn2(); fn3(); 但有时候这些函数是运行时一个个添加进来的,调用的时候并不知道都有些什么函数:这个时候可以预先定义一个数组,添加函数的时候把函数push 进去,需要的时候从数组中按顺序一个个取出来,依次调用: var stack =

  • 不同js异步函数同步的实现方法

    不同函数达到同步的函数模拟 funcList是函数执行函数的队列,其中回调函数中flag=true是同步标记量 <script> var flag = false; function funcTest(t,func){ setTimeout(function(){ (function(param){ console.log(param); func(); }(t)); },t*1000); } var funcList = []; funcList.push(function(){funcTe

  • NodeJS中利用Promise来封装异步函数

    在写Node.js的过程中,连续的IO操作可能会导致"金字塔噩梦",回调函数的多重嵌套让代码变的难以维护,利用CommonJs的Promise来封装异步函数,使用统一的链式API来摆脱多重回调的噩梦. Node.js提供的非阻塞IO模型允许我们利用回调函数的方式处理IO操作,但是当需要连续的IO操作时,你的回调函数会多重嵌套,代码很不美观,而且不易维护,而且可能会有许多错误处理的重复代码,也就是所谓的"Pyramid of Doom". 复制代码 代码如下: ste

  • Node.js基础入门之回调函数及异步与同步详解

    Node.js基础入门之回调函数及异步与同步详解

    目录 回调函数 1. 什么是回调函数? 2. 回调函数实现机制 3. 回调函数用途 4. 回调函数示例 异步与同步 1. 什么是异步与同步? 2. 同步示例 3. 异步示例一 4. 异步示例二 异步的实现 1. 回调函数的同步示例 2. 异步事件示例 3. 异步示例截图 Promise基础 1. 什么是Promise ? 2. Promise特点 3. 异步的缺点 4. Promise保证异步顺序 经过前面两天的学习,已经对Node.js有了一个初步的认识,今天继续学习其他内容,并加以整理分享,

  • 获取JavaScript异步函数的返回值

    今天研究一个小问题: 怎么拿到JavaScript异步函数的返回值? 1.错误尝试 当年未入行时,我的最初尝试: <script> function getSomething() { var r = 0; setTimeout(function() { r = 2; }, 10); return r; } function compute() { var x = getSomething(); alert(x * 2); } compute(); </script> 2.回调函数

  • nodejs异步编程基础之回调函数用法分析

    nodejs异步编程基础之回调函数用法分析

    本文实例讲述了nodejs异步编程基础之回调函数用法.分享给大家供大家参考,具体如下: Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node 所有 API 都支持回调函数. 例如,我们可以一边读取文件,一边执行其他命令,在文件读取完成后,我们将文件内容作为回调函数的参数返回.这样在执行代码时就没有阻塞或等待文件 I/O 操作.这就大大提高了 Node.js 的性能,可

  • promise和co搭配生成器函数方式解决js代码异步流程的比较

    在es6中引入的原生Promise为js的异步回调问题带来了一个新的解决方式,而TJ大神写的co模块搭配Generator函数的同步写法,更是将js的异步回调带了更优雅的写法. 今天我想对比一下这两种方式,来看看这两种方式的区别以及优劣. 我们先抽象几个操作: 以做饭为例,我们先去买菜,回来洗菜,刷碗,烧菜,最后才是吃.定义如下方法: var buy = function (){}; //买菜,需要3s var clean = function(){}; //洗菜,需要1s var wash =

  • JavaScript 异步函数 Promisification 处理详情

    前言: Promisification 是一个很长的词,表示一个编程范式的转变,即将接受回调的函数转换为一个返回类型为 Promise 的函数. 我们现实的开发项目中经常需要这种转换,因为许多函数和库都是基于回调的,但是 Promise 更方便,所以对它们进行 Promisification 处理是有意义的. 下面是一个简单的例子: function loadScript(src, callback) { let script = document.createElement('script')

  • 谈谈JavaScript异步函数发展历程

    <The Evolution of Asynchronous JavaScript>外文梳理了JavaScript异步函数的发展历程,首先通过回调函数实现异步,之后又经历了Promise/A+.生成器函数,而未来将是async函数的.感谢景庄对该文章的翻译,内容如下: 现在让我们一起来回顾这些年来JavaScript异步函数的发展历程吧. 回调函数Callbacks 似乎一切应该从回调函数开始谈起. 异步JavaScript 正如我们所知道的那样,在JavaScript中,异步编程方式只能通过

  • 浅析javascript异步执行函数导致的变量变化问题解决思路

    浅析javascript异步执行函数导致的变量变化问题解决思路 for(var i=0;i<3;i++) { setTimeout(function(){ console.log(i) },0); } 控制台输出: 3 3 3 这是因为执行方法的时候for循环已经执行完成每次执行的时候取得都是3 而不是1-2-3这时我们可以使用立即执行函数为每一次循环创建一个变量副本来供定时器调用解决这个问题 for (var i = 0; i < 3; i++) { setTimeout( (functio

  • Javascript的异步函数和Promise对象你了解吗

    Javascript的异步函数和Promise对象你了解吗

    目录 1.JS中的异步 1.1同步 1.2异步 1.3回调函数解决异步问题 1.4回调地狱 2.Promise对象 2.1Promise的基本使用 2.2async和await 总结 1.JS中的异步 1.1 同步 一般情况下,js的代码都是自上而下顺序运行的.例如: let res = ''; res = '获取到的结果!'; console.log(res); 结果: 很容易理解,我给res赋了新值,然后输出res.这就是js的同步执行,这里的同步,并不是一起执行的意思,而是在一个线程里顺序

  • JavaScript 异步调用

    问题 可修改下面的 aa() 函数,目的是在一抄后用 console.log() 输出 want-value function aa() { setTimeout(function() { return "want-value"; }, 1000); } 但是,有额外要求: aa() 函数可以随意修改,但是不能有 console.log() 执行 console.log() 语句里不能有 setTimeout 包裹 解答 也许这是个面试题,管它呢.问题的主要目的是考察对异步调用执行结果

  • 浅析JavaScript回调函数应用

    一.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函数.因此callba

  • 再谈JavaScript异步编程

    随着前端的发展,异步这个词真是越来越常见了.假设我们现在有这么一个异步任务: 向服务器发起数次请求,每次请求的结果作为下次请求的参数. 来看看我们都有哪些处理方法: Callbacks 最先想到也是最常用的便是回调函数了,我们来进行简单的封装: let makeAjaxCall = (url, cb) => { // do some ajax // callback with result } makeAjaxCall('http://url1', (result) => { result =

  • JavaScript 异步调用框架 (Part 1 - 问题 & 场景)

    问题 在Ajax应用中,调用XMLHttpRequest是很常见的情况.特别是以客户端为中心的Ajax应用,各种需要从服务器端获取数据的操作都通过XHR异步调用完成.然而在单线程的JavaScript编程中,XHR异步调用的代码风格实在是与一般的JavaScript代码格格不入. 额外参数 考虑一个除法函数,如果它是纯客户端的同步函数,那么签名会是这样的: function divide(operand1, operand2) 然而假设我们对客户端除法的精度不满意,于是把除法转移到服务器端来执行

随机推荐