异步方法顺序调用问题
前端应用中时常出现多个异步方法需要依次调用,且后一个异步方法的执行依赖于前一个异步方法的返回结果的情况,下面主要介绍一下这种情况的处理方法。
方法1:异步方法嵌套调用
此种方法逻辑简单,但代码较为繁琐。
方法2:使用async函数
(参考ES6 async函数)
ES2017 标准引入了 async 函数,使得异步操作变得更加方便。
2.1 用法
在函数的前面加上async
关键字,表明该函数内部有异步操作。该函数在执行的时候遇到await
就会返回,再接着执行函数体后面的语句。
正常情况下,await
命令后面是一个Promise 对象
,返回该对象的结果;如果不是Promise对象,就直接返回对应的值。
async function getStockPriceByName(name) {const symbol = await getStockSymbol(name);const stockPrice = await getStockPrice(symbol);return stockPrice;
}getStockPriceByName('goog').then(function (result) {console.log(result);
});
async函数
返回一个 Promise 对象
,可以使用then方法
添加回调函数。函数内部的return
语句的返回值,会成为then方法
回调函数的参数。
如果async函数
内部抛出错误,则会导致返回的 Promise 对象变为reject
状态。抛出的错误对象会被catch方法回调函数接收到。
注意: 任何一个
await
语句后面的 Promise 对象变为reject
状态,那么整个async函数都会中断执行。
async function f() {await Promise.reject('出错了');
}f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出错了
async function f() {await Promise.reject('出错了');await Promise.resolve('hello world'); // 不会执行
}
2.2 错误处理
如果希望即使前一个异步操作失败,也不要中断后面的异步操作,可以使用下面两种方法:
- 可以将第一个await语句放在
try...catch
结构里面,这样不管这个异步操作是否成功,第二个await都会执行。如果有多个await命令,可以统一放在try...catch
结构中。
async function f() {try {await Promise.reject('出错了');} catch(e) {}return await Promise.resolve('hello world');
}f().then(v => console.log(v))
// hello world
- await后面的 Promise 对象再跟一个catch方法,处理前面可能出现的错误。
async function f() {await Promise.reject('出错了').catch(e => console.log(e));return await Promise.resolve('hello world');
}f()
.then(v => console.log(v))
// 出错了
// hello world
2.3 Promise 对象的状态变化
async函数
返回的 Promise 对象,必须等到内部所有await
命令后面的 Promise 对象执行完,才会发生状态改变,除非遇到return语句或者抛出错误。也就是说,只有async函数内部的异步操作执行完,才会执行then方法
指定的回调函数。
注意: await命令只能用在async函数之中,如果用在普通函数,就会报错。
方法3:使用Rxjs操作符
3.1 使用zip
操作符(参考RxJS-zip)
使用zip
方法将多个 Observable 组合以创建一个 Observable,该 Observable 的值是由所有输入 Observables 的值按顺序计算而来的。
如果最后一个参数是函数,这个函数被用来计算最终发出的值;否则,返回一个顺序包含所有输入值的数组。
使用时需要在文件中导入操作符:
import { zip } from 'rxjs';zip(observable1,observable2,
).subscribe(([result1, result2]) => {// do something
});
— END —
相关文章:

(转载)从无知到有知
这篇文章的作者是徐宥,觉得很有共鸣,好东西大家分享一下 February 3, 2010 at 11:07 pm Filed under Article, Memo, Self-help [这篇文章是以前写的,主要是提醒自己的] 人的一生是要不断学习的。这里面的动力很简单:因为我们在…

Cisco *** 完全配置指南-连载-PIX和ASA连接的故障诊断与排除
Cisco *** 完全配置指南-连载-PIX和ASA连接的故障诊断与排除一、ISAKMP/IKE阶段1连接<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />show isakmp sa [detail]显示任何管理连接的状态show [crypto] isakmp stats 显示管理连接的…

Angular应用开发中遇到的问题
记录在开发Angular应用时遇到的问题以及解决方案。 问题 3 前提:在Angular应用的组件中使用响应式表单进行数据校验,使用FormBuilder服务的 group()方法来构建一组FormControl实例。 需要监听其中控件的值的变化时,由于控件的类型为Abstrac…

小麦带你看postgres(代码模块结构)
初始化部分(Initialization) bootstrap:和系统表相关。 main:传递参数到后台的pg进程。 postmaster:控制pg服务开关,创建共享内存,循环等待连接并分配服务。 libpq:与子进程通讯相关…

c#学习的几个层次
1. 基本运用C#语法,在各种工具和示例代码的支持下,完成一些基本程序任务 2. 熟练掌握面向对象与组件构造,知其然亦知其所以然,完成一般小规模信息管理类软件项目开发任务 3. 深入理解CLR内核机制,对各种类型与.NET平…

nodeJs --- web服务器创建
一、下载nodeJs http://nodejs.cn/download/ 根据自己的情况选择下载 然后在命令行中输入 node -v 看是否安装成功 (下载node时,会把npm包处理工具一起下) 二、server,js 在文件夹下创建一个server.js var http require(http)http.createSer…

河北省医疗卫生数据中心案例简介
河北省卫生厅是负责全省卫生工作的政府部门,辖区人口6000万,其职能是基于国家卫生工作大政方针,研究提出全省卫生事业发展规划和战略目标,制订全省卫生工作计划、地方规范和标准,开展行业监督管理和服务。河北省卫生信…

Angular应用中tsconfig.json文件配置说明及配置全局路径映射
tsconfig.json文件配置说明1. tsconfig.json文件中的选项配置2. 配置全局路径映射1. tsconfig.json文件中的选项配置 TypeScript编译器配置文件的JSON模式 {"title": "JSON schema for the TypeScript compilers configuration file","$schema"…

疑问:c++中的memset
在dev c下调试 1 #include <mem.h>2 #include <iostream.h>3 #include <cstdlib>//配合system("PAUSE");用于看调试结果 4 5 intmain()6 {7 intia1[10];8 memset(ia1,1,10*sizeof(int));9 for(inti0;i<(sizeof(ia1)/sizeof(int));i)10 cout <…

Scrapy shell
一、Scrapy shell简介 Scrapy终端是一个交互终端,供您在未启动spider的情况下尝试及调试您的爬取代码。 其本意是用来测试提取数据的代码,不过您可以将其作为正常的Python终端,在上面测试任何的Python代码。 该终端是用来测试XPath或CSS表达式…

堆排序——HeapSort
基本思想: 图示: (88,85,83,73,72,60,57,48,42,6) 平均时间复杂度: O(NlogN)由于每次重新恢复堆的时间复杂度为O(logN),共N - 1次重新恢复堆操作,再加上前面建立堆时N / 2次向下调整,…

一个web蠕虫的简单实现
在这之前先鄙视下一些人发现漏洞就挂马的无耻行为,我曾经因为一个公开的漏洞而在一个网站站上发现24个各个所谓组织,所谓黑客的后门,鄙视!所谓蠕虫,其本质是利用计算机或者应用程序的漏洞进行感染和传播的一段程序&…

SpringBoot设置Session失效时间
1 #Session超时时间设置,单位是秒,默认是30分钟 2 server.session.timeout10 然而并没有什么用,因为SpringBoot在TomcatServletWebServerFactory代码中写了这个 1 private long getSessionTimeoutInMinutes() { 2 Duration sessi…

js url传值中文乱码完美解决(JAVA)
首先在你的jsp页面这样更改: var url"你要传入的Action的位置&ipid"ipid"&keyWord"key; 这里的key是中文,从input中取到值后,使用alert(key)发现中文没有乱码。 那么我们可以对url进行一下处理:urlen…

Angular应用中配置全局路径映射
Angular应用中配置全局路径映射1. tsconfig.json文件配置说明2. 配置全局路径映射2.1 指定baseUrl属性值2.2 配置paths属性值2.3 使用示例为了避免移动文件时调整基本文件的引用路径,或者为了引用部分文件时缩短引用路径,可以在配置文件中配置全局路径映…

对Oracle中索引叶块分裂而引起延迟情况的测试和分析
在版本10.2.0.4未打上相关one-off补丁的情况下,分别对ASSM和MSSM管理模式表空间进行索引分裂测试,经过测试的结论如下: l 在10gr2版本中MSSM方式是不能避免索引分裂引起交易超时问题; l 10.2.0.4上的one-off补丁因为目前仅存在L…

node.js和npm版本升级及升级过程中遇到的问题和解决方案
Node.js和NPM版本升级1. 安装Node.js1.1 版本检查1.2 下载安装程序1.3 安装2. npm升级2.1 版本检查2.2 升级3. 检查Node.js和npm之间的版本对应关系4. 检查Angular CLI、Angular、Node.js、TypeScript 和 RxJS 兼容性矩阵最初在本地安装Node.js和npm时,是通过Angula…

学习进度(5)
记录时间: 第六周 所花时间(包括上课) 20h 代码量(行) 400行 博客量(篇) 0篇 了解到的知识点 结对开发石家庄地铁软件,迪杰斯特拉算法的应用 转载于:https://www.cnblogs.c…

Windows搭建wnmp
http://www.cnblogs.com/wujuntian/p/7252343.html转载于:https://www.cnblogs.com/xiaobai-y/p/7815945.html

我的名字叫博客
我的部落是一个小部落,人口比较少,资源很贫瘠,但是我的人们很努力,他们都是最强的!转载于:https://www.cnblogs.com/cchenry/archive/2009/06/25/1511162.html

实例15 判断某一年是否为闰年
package wjf; import java.util.Scanner; public class wjf1{public static void main(String[] args){ //主方法Scanner scannew Scanner(System.in); System.out.println("请输入一个年份"); //向控制台输出一个提示信息long year;try{yearsc…

前端开发知识总结思维导图
前端开发扮演的一个角色: 前端开发知识点总结: 转载于:https://www.cnblogs.com/zhaodagang8/p/7821427.html

Angular应用提高打包速度
当Angular应用功能不断增加时,其打包速度会变慢,可以尝试使用以下方法缩短打包时间。 打开node_modules/webpack/lib/optimize/ModuleConcatenationPlugin.js文件,注释以下代码片段: for (let i 0; i < newModule.dependencie…

iCup,USB加热饮品方案
词条: iCup USB加热杯 USB电器 猛料: 其实看用的macbook作为例子,就知道这个设计很有一段时间啦,用i打头来为苹果打造各种莫名其妙的周边产品也是前几年的潮流,iCup出自Onur Karaalioglu的设计,将USB作为加…

Angular 文件上传与下载
Angular文件上传与下载文件上传方式1 使用NG ZORRO中的组件。文件下载方式1 直接下载方式2 通过HTTP请求后端数据的方式进行下载文件上传 方式1 使用NG ZORRO中的组件。 文件下载 方式1 直接下载 已知明确的下载链接,可以直接进行下载。 <a href"downlo…

包装类接受string 会自动将数字类型string转换成对应得包装类型
转载于:https://www.cnblogs.com/classmethond/p/10663229.html

tensorflow常用函数解析
一、tf.transpose函数的用法 tf.transpose(input, [dimension_1, dimenaion_2,..,dimension_n]):这个函数主要适用于交换输入张量的不同维度用的,如果输入张量是二维,就相当是转置。dimension_n是整数,如果张量是三维,就是用0,1,2…

FLASH处理图像的移动、缩放、旋转、颜色变换的类推荐。
这3个都是比较好的外部类,帮助操作图像的。 教程也比较详细。 看了以后发现,需要把图形学的书翻出来再补补课鸟... http://www.adobe.com/devnet/flash/articles/matrix_transformations_print.html http://blog.joa-ebert.com/imageprocessing-library/…

机器学习——XGBoost大杀器,XGBoost模型原理,XGBoost参数含义
0.随机森林的思考 随机森林的决策树是分别采样建立的,各个决策树之间是相对独立的。那么,在我们得到了第k-1棵决策树之后,能否通过现有的样本和决策树的信息, 对第m颗树的建立产生有益的影响呢?在随机森林建立之后&…

使用存储过程更新数据库!成功了但是返回值为 -1 的变态问题的解决办法!
今天遇到个表态的问题!使用带事务的存储过程执行sql语句,看数据库里面插入更新都正常! 但是返回值一直为-1! 头那个大哦!先贴2个存储过程吧!看大侠们能否找到问题的存在 USE [My_DB] GO/****** Object: St…