文档章节

如何在Promise链中共享变量?

Fundebug
 Fundebug
发布于 2017/09/04 18:16
字数 912
阅读 6
收藏 0
点赞 0
评论 0

译者按: 使用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以及本文地址:

https://blog.fundebug.com/2017/09/04/promise-share-variable/

© 著作权归作者所有

共有 人打赏支持
Fundebug
粉丝 3
博文 70
码字总数 95391
作品 0
厦门
JavaScript Promise 学习记录(一)

JavaScript Promise 学习记录(一) 本文首先介绍了promise的三种状态及生成不同状态promise方法,然后介绍了promise的回调处理方法then,分析了不同情况下then函数返回的promise状态。最后通过...

kkdev163 ⋅ 2017/11/27 ⋅ 0

玩转异步 JS :async/await 简明教程(附视频下载)

课程介绍 在软件开发领域,简洁的代码 => 容易阅读的代码 => 容易维护的代码,而 ES2017 中的 async/await 特性能让我们编写出相比回调地狱和 Promise 链式调用更直观、更容易理解的代码,a...

王仕军 ⋅ 2017/11/10 ⋅ 0

前端问题总汇

1、vue1.0到vue2.0的变化?组件之间如何通信? 2、webpack主要做了什么?怎么打包的? 3、模块化是做什么的?模块化解决了什么问题?模块化有什么优点呢? AMD、CMD、commonJS这些要了解,再...

xuhaoxin123 ⋅ 2017/11/20 ⋅ 0

社招中级前端笔试面试题总结-答案及拓展

最近看到有一篇文章总结了一些前端的面试题,面向的对象应该是社招中初、中级的前端,感觉有一定的参考价值,因此开一个帖子尝试解答这些问题,顺便当做自己的面试题积累。 原文链接戳这里 ...

不肥的肥羊 ⋅ 05/25 ⋅ 0

150行实现Promise 90%的功能

Promise的实现也算是一个老话题了,网上同类型的文章和示例代码不少,其中不乏许多优秀的实现。但因为Promise“魔幻”的API,以及背后包含的异步处理的独特思想,使得实现一个Promise仍旧是一...

lqt0223 ⋅ 03/02 ⋅ 0

你不知道的JavaScript(中卷)|Promise(一)

什么是Promise fetchX() 和fetchY() 是直接调用的,它们的返回值(promise!)被传给add(..)。这些promise代表的低层值的可用时间可能是现在或将来,但不管怎样,promise归一保证了行为的一致...

xpwei ⋅ 2017/11/22 ⋅ 0

深入理解ES6--11.Promise和异步编程

主要知识点:Promise生命周期、Promise基本操作、Promise链、响应多个Promise以及集成Promise 1. Promise基础 什么是回调地狱? 当使用回调函数来进行事件处理的时候,如果嵌套多层回调函数的...

你听___ ⋅ 05/03 ⋅ 0

ES6语法总结

一.变量的结构赋值 二.属性扩展 1.字符串扩展 1).chartAt返回指定字符 2).includes,startWith,endsWith判断该字符串是否含有某字符 3).repeat复制字符 4).padStart,padEnd补全字符 2.数值扩展...

Ethan-GOGO ⋅ 2016/10/12 ⋅ 0

无他,唯手熟尔-前端实习面试题篇

以下基本是我在面试中遇到的所有问题,给大家做一个参考。除2月13和14日为现场面试以外,其余均为电话面试。我的本意不是让大家背答案,所以没有把面试公司的名字写出来,只是想给不知道如何...

卢睿韬 ⋅ 2017/03/19 ⋅ 0

利用jQuery实现多个ajax请求等待

前言 通常,jQuery的函数ajax进行Ajax调用。函数ajax只能做一个Ajax调用。当Ajax调用成功时,执行回调函数。可选地,当Ajax调用返回错误时,调用另一个回调函数。但是,该功能不能根据这些请...

编程需要艺术 ⋅ 2017/12/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

NFS介绍 NFS服务端安装配置 NFS配置选项

NFS介绍 NFS是Network File System的缩写;这个文件系统是基于网路层面,通过网络层面实现数据同步 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导...

lyy549745 ⋅ 29分钟前 ⋅ 0

Spring AOP 源码分析 - 筛选合适的通知器

1.简介 从本篇文章开始,我将会对 Spring AOP 部分的源码进行分析。本文是 Spring AOP 源码分析系列文章的第二篇,本文主要分析 Spring AOP 是如何为目标 bean 筛选出合适的通知器(Advisor...

java高级架构牛人 ⋅ 51分钟前 ⋅ 0

HTML-标签手册

标签 描述 <!--...--> 定义注释。 <!DOCTYPE> 定义文档类型。 <a> 定义锚。超链接 <abbr> 定义缩写。 <acronym> 定义只取首字母的缩写。 <address> 定义文档作者或拥有者的联系信息。 <apple......

ZHAO_JH ⋅ 53分钟前 ⋅ 0

SylixOS在t_main中使用硬浮点方法

问题描述 在某些使用场景中,应用程序不使用动态加载的方式执行,而是跟随BSP在 t_main 线程中启动,此时应用代码是跟随 BSP 进行编译的。由于 BSP 默认使用软浮点,所以会导致应用代码中的浮...

zhywxyy ⋅ 今天 ⋅ 0

JsBridge原理分析

看了这个Github代码 https://github.com/lzyzsd/JsBridge,想起N年前比较火的Hybrid方案,想看看现在跨平台调用实现有什么新的实现方式。代码看下来之后发现确实有点独特之处,这里先把核心的...

Kingguary ⋅ 今天 ⋅ 0

Intellij IDEA神器常用技巧五-真正常用快捷键(收藏级)

如果你觉得前面几篇博文太啰嗦,下面是博主多年使用Intellij IDEA真正常用快捷键,建议收藏!!! sout,System.out.println()快捷键 fori,for循环快捷键 psvm,main方法快捷键 Alt+Home,导...

Mkeeper ⋅ 今天 ⋅ 0

Java 静态代码分析工具简要分析与使用

本文首先介绍了静态代码分析的基本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代码分析工具 (Checkstyle,FindBugs,PMD,Jtest),最后从功能、特性等方面对它们进行分析和比较,...

Oo若离oO ⋅ 今天 ⋅ 0

SpringBoot自动配置小记

spring-boot项目的特色就在于它的自动配置,自动配置就是开箱即用的本源。 不过支持一个子项目的自动配置,往往比较复杂,无论是sping自己的项目,还是第三方的,都是如此。刚接触会有点乱乱...

大_于 ⋅ 今天 ⋅ 0

React jsx 中写更优雅、直观的条件运算符

在这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西。比如条件运算符 Conditional Operator condition ? expr_if_true : expr_if_false 在jsx中书写条件语句我们经常都...

开源中国最帅没有之一 ⋅ 今天 ⋅ 0

vim编辑模式与命令模式

5.5 进入编辑模式 从编辑模式返回一般模式“Esc” 5.6 vim命令模式 命令 :“nohl”=no high light 无高亮,取消内容中高亮标记 "x":保存退出,和wq的区别是,当进入一个文件未进行编辑时,使...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部