如何在Promise链中共享变量?

译者按: 使用Promise写过异步代码的话,会发现在Promise链中共享变量是一个非常头疼的问题,这也是Async/Await胜过Promise的一点,我们在Async/Await替代Promise的6个理由有提过,这篇博客将有更详细的介绍。

为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改。另外,本文版权归原作者所有,翻译仅用于学习。

基于Promise编写异步代码时,通常会使用多个then组成链式调用,每一个then都会有一个回调函数。因此,在Promise链中,会有很多回调函数,每个回调函数都有一个独立的变量作用域。那么,如何在这些回调函数之间共享变量呢?这篇博客将探讨这个问题。

问题

connection变量在A处定义,在BC处都需要使用。但是,由于A、B、C处于各自独立的作用域,connection变量将不能在BC处直接使用。

db.open()
    .then(connection => // A
    {
        return connection.select(
        {
            name: ‘Fundebug‘
        });
    })
    .then(result =>
    {
        connection.query(); // B
    })
    .catch(error =>
    {
        // ...
    })
    .finally(() =>
    {
        connection.close(); // C
    });

方法1:使用高阶作用域变量

在更高阶的作用域定义connection变量,在D处赋值,这样在BC处直接使用了。

let connection; // A
db.open()
    .then(conn =>
    {
        connection = conn; // D
        return connection.select(
        {
            name: ‘Fundebug‘
        });
    })
    .then(result =>
    {
        connection.query(); // B
    })
    .catch(error =>
    {
        // ...
    })
    .finally(() =>
    {
        connection.close(); // C
    });

问题:如果需要共享的变量过多(这是很常见的情况),则需要在高阶作用域中定义很多变量,这样非常麻烦,代码也比较冗余。

方法2:嵌套作用域

将需要使用connection变量的Promise链内嵌到对应then回调函数中,这样在BC处直接使用了。

db.open()
    .then(connection => // A
        {
            return connection.select(
                {
                    name: ‘Fundebug‘
                })
                .then(result =>
                {
                    connection.query(); // B
                })
                .catch(error =>
                {
                    // ...
                })
                .finally(() =>
                {
                    connection.close(); // C
                });
        });

问题:之所以使用Promise,就是为了避免回调地域,将多层嵌套的回调函数转化为链式的then调用;如果为了共享变量采用嵌套写法,则要Promise有何用?

方法3:return多个值

intermediate变量在A处定义并赋值,而在B处需要使用;但是,由于AB处于不同的作用域,B出并不能直接使用intermediate变量:

return asyncFunc1()
    .then(result1 =>
    {
        const intermediate = ··· ; // A
        return asyncFunc2();
    })
    .then(result2 =>
    {
        console.log(intermediate); // B
    });

A处使用Promise.all返回多个值,就可以将intermediate变量的值传递到B处:

return asyncFunc1()
    .then(result1 =>
    {
        const intermediate = ···;
        return Promise.all([asyncFunc2(), intermediate]); // A
    })
    .then(([result2, intermediate]) =>
    {
        console.log(intermediate); // B
    });

问题: 使用Promise.all用于传递共享变量,看似巧妙,但是有点大材小用,并不合理;不能将变量传递到.catch()finally()中;当共享变量过多,或者需要跨过数个.then(),需要return的值会很多。

方法4: 使用Async/Await

Async/Await是写异步代码的新方式,可以替代Promise,它使得异步代码看起来像同步代码,可以将多个异步操作写在同一个作用域中,这样就不存在传递共享变量的问题了!!!

方法1中的示例可以改写为:

try
{
    var connection = await db.open(); // A
    const result = await connection.select(
    {
        name: ‘Fundebug‘
    });
    connection.query(); // B
}
catch (error)
{
    // ...
}
finally
{
    connection.close(); // C
}

方法3中的示例可以改写为:

try
{
    result1 = await asyncFunc1();
    const intermediate = ··· ;
    result2 = await asyncFunc2();
    console.log(intermediate);
}
catch (error)
{
    // ...
}

毋庸赘言,Async/Await直接将问题消灭了,无疑是更好的方式!

参考

关于Fundebug:

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!

版权声明

转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/09/04/promise-share-variable/

原文地址:http://blog.51cto.com/13957060/2319483

时间: 2024-10-24 22:18:14

如何在Promise链中共享变量?的相关文章

编程学习之如何在Node.js中优化服务器端渲染?[图]

编程学习之如何在Node.js中优化服务器端渲染?[图]在 Airbnb,我们花了数年时间将所有前端代码迁移到 React 架构,Ruby on Rails 在 Web 应用中所占的比例每天都在减少.实际上,我们很快会转向另一个新的服务,即通过 Node.js 提供完整的服务器端渲染页面.这个服务将为 Airbnb 的所有产品渲染大部分 HTML.这个渲染引擎不同于其他后端服务,因为它不是用 Ruby 或 Java 开发的,但它也不同于常见的 I/O 密集型 Node.js 服务.一说起 Nod

如何在NodeJS项目中优雅的使用ES6

如何在NodeJS项目中优雅的使用ES6 NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性.只是在使用的时候需要在node后面加上参数:--harmony.但是,即使如此node也还是没有支持全部的ES6特性.所以这个时候就需要用到Babel了. 现在开始Babel 在开始使用Babel之前,假设 1. 你已经安装了nodejs,并且已经熟悉了Js. 2. 你也可以使用npm安装各种依赖包. 3. 而且你也对ES6(后来改为

从如何停掉 Promise 链说起

在使用Promise处理一些复杂逻辑的过程中,我们有时候会想要在发生某种错误后就停止执行Promise链后面所有的代码. 然而Promise本身并没有提供这样的功能,一个操作,要么成功,要么失败,要么跳转到then里,要么跳转到catch里. 如果非要处理这种逻辑,一般的想法是抛出一个特殊的Error对象,然后在Promise链后面的所有catch回调里,检查传来的错误是否为该类型的错误,如果是,就一直往后抛,类似下面这样 doSth() .then(value => { if (sthErro

从算法入手讲解如何在SQL Server中实现最优最简

算法是计算机科学中一个重要的研究方向,是解决复杂问题的关键.在计算机世界中,算法无处不在.数据库是存储数据和执行大批量计算的场所,在数据库中使用一些简单的SQL命令,进行存储.查询.统计.以解决现实世界中的问题已经是屡见不鲜.随着数据量的大幅度增加和业务规则的日益复杂,越来越需要一种专门的方法来满足效率和准确性方面的要求.如何把解决问题的复杂算法转换为数据库能够执行的命令,也是数据库应用技术研究的一个方面.本文以MSSQL中的命令来阐述例子. 数据库中可以存储实体的数据集合,在进行运算时,数据库

如何在oracle 12c中创建普通用户

-------如何在oracle 12c中创建普通用户------- [[email protected] ~]$ sqlplus / as sysdba SQL*Plus: Release 12.1.0.2.0 Production on Sun Nov 29 21:43:50 2015 Copyright (c) 1982, 2014, Oracle. All rights reserved. Connected to: Oracle Database 12c Enterprise Edit

如何在c程序中动态使用数组

C语言不允许对数组的大小作动态定义,不能在程序中临时输入数组大小,这就给编程带来一定的困难. 下面通过一个求平均数和标准差的小程序来展示如何在程序中动态定义数组大小: 1 /*如何在c程序中动态使用数组(calloc函数)*/ 2 #include <stdio.h> 3 #include <stdlib.h> 4 #include <math.h> 5 int main(){ 6 int num; //数据个数 7 double sum,ave,s2; //数据和.平

Spring 如何在 WEB 应用中使用

1. Spring 如何在 WEB 应用中使用 ? 1). 需要额外加入的 jar 包: spring-web-4.0.0.RELEASE.jar spring-webmvc-4.0.0.RELEASE.jar 2). Spring 的配置文件, 没有什么不同 3). 如何创建 IOC 容器 ? ①. 非 WEB 应用在 main 方法中直接创建 ②. 应该在 WEB 应用被服务器加载时就创建 IOC 容器: 在 ServletContextListener#contextInitialized

如何在android app中使用STL库

方法: 1.在jni目录下新建Application.mk; 加入 APP_STL := stlport_static右边的值还可以换成下面几个: system - 使用默认最小的C++运行库,这样生成的应用体积小,内存占用小,但部分功能将无法支持 stlport_static - 使用STLport作为静态库,这项是Android开发网极力推荐的 stlport_shared - STLport作为动态库,这个可能产生兼容性和部分低版本的Android固件,目前不推荐使用. gnustl_st

Maven(一)——如何在Windows操作系统中安装配置Maven环境

今天难得的周末,借此难的机会总结一下关于maven的一些操作: 1.在安装maven之前要确认计算机已经安装并配置了JDK: 2.下载maven: maven-3.0.3:http://download.csdn.net/detail/wangshuxuncom/7367413 maven-3.0.5:http://download.csdn.net/detail/wangshuxuncom/7551799 说明:上述资源均免费下载 这里选择maven-3.0.3来演示安装.将maven-3.0