利用Promise实现数据多个请求加载完成时执行某个方法

在实际开发中常常有些业务的数据是来自多个接口的,因为ajax是异步,这样就导致我们需要判断是否请求到了数据然后在做其他的逻辑,在Promise没有出现之前,通常我们的解决方法是,第一粗暴的改异步为同步,但这样会造成阻塞,异步好像又失去了意义,第二也就是大家常用的解决办法用回调既一个异步执行完成后在执行下一个请求,这样看比第一种要好太多了,但是问题又来了,延迟延迟延迟,请求越多最后的那个请求延迟就会越严重,而且这样请求多了之后逻辑就会变得很乱。。。痛苦不堪,还好es6带来的Promise正好能解决这个东西,关于Promise具体详情请百度,这里大致只说三个东西,resolve, reject,Promise.all 对应成功执行,失败执行,返回全部状态,实例贴代码 很容易理解。

const promist = new Promise((resolve, reject) => {
this.$http.jsonp(getRegionNameByIdApi, {params: {regionId: dqarr}}).then((res) => {
this.dqarr = res.body.data
resolve(res.body.data)
}, (err) => {
console.log(err)
})
})
const promist1 = new Promise((resolve, reject) => {
this.$http.jsonp(getPartnerNameByIdApi, {params: {partnerId: sharr}}).then((res) => {
this.sharr = res.body.data
resolve(res.body.data)
}, (err) => {
console.log(err)
})
})
Promise.all([promist, promist1]).then((resultList) => {
console.log(‘results:‘, resultList)
resultList[0].map((item) => {
this.tableData.map((val) => {
if (item.regionId === val.regionId) {
val.region_name = item.regionName
}
if (item.regionId === val.areaId) {
val.area_name = item.regionName
}
if (item.regionId === val.shopId) {
val.shopName = item.regionName
}
if (resultList[1][val.partnerId]) {
val.partner_name = resultList[1][val.partnerId]
}
})
})
this.$set(this.tableData, this.tableData)
})
创建promis和promist1并赋值一个Promise返回结果,在new一个新的Promise中 resolve代表成功要执行的方法,传入异步响应的数据,这个新的Promise最后将返回一个数组 最后Promise.all传入两个参数,注意Promise.all只能传入一个数组,在数组中放promis和promis1,在then中同样返回一个数组,对应promis和promis1成功响应的数据
---------------------
作者:wzzehui
来源:CSDN
原文:https://blog.csdn.net/wzzehui/article/details/81179921
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/limengyao/p/10254472.html

时间: 2024-11-24 04:31:42

利用Promise实现数据多个请求加载完成时执行某个方法的相关文章

如何实现加载DOM时执行js代码

有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了. 大家可以使用windows.onload事件,但onload在看来,就是页面上的东西(img,iframe等资源)全部都加载完毕后才能发生,如果页面内有大的图片的话,会在页面展现后好久时间后才执行.鸿运国际娱乐城 如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了.我们需要更快的方法.Firefox有DOMContentLoaded

判断iframe加载完成、用于当ifame加载完成时执行一些操作

window.frames["iframec"].addEventListener( "load", function(){ window.frames["iframec"].setFormValue(obj);//iframe加载完成时的操作 }); IE iframe.attachEvent("onreadystatechange", function(){ //此事件在内容没有被载入时候也会被触发,所以我们要判断状态 /

spring 容器加载完成后执行某个方法

理论 刚好再开发过程中遇到了要在项目启动后自动开启某个服务,由于使用了spring,我在使用了spring的listener,它有onApplicationEvent()方法,在Spring容器将所有的Bean都初始化完成之后,就会执行该方法. 应用场景:很多时候我们想要在某个类加载完毕时干某件事情,但是使用了spring管理对象,我们这个类引用了其他类(可能是更复杂的关联),所以当我们去使用这个类做事情时发现包空指针错误,这是因为我们这个类有可能已经初始化完成,但是引用的其他类不一定初始化完成

springboot框架在容器加载完成之后执行某个方法

问题描述: 想在websocket实现的Handler中执行一些初始化操作,但是初始化操作使用到了@Autowired自动注入的变量,而且是保护类型.第一个想法是放到Handler构造函数中执行,但是@Autowired注入的变量为null,故此方法不可行. 问题解决 解决方法一 在Application启动类中实现ApplicationListener接口,这个接口支持的ApplicationReadyEvent事件在上下文已经准备完毕的时候触发. 代码如下 /* * Copyright 20

spring启动容器加载成功后执行调用方法

需求: 由于在微服务架构中各服务之间都是通过接口调用来进行交互的,像很多的基础服务,类似字典信息其实并不需每次需要的时候再去请求接口.所以我的想法是每次启动项目的时候,容器初始化完成,就去调用一下基础服务的接口.通过一个本地map来缓存需要的数据.当我需要使用的时候直接从本地缓存中取.下面是具体的代码实现. 在启动类中实现ApplicationListener 接口,重写onApplicationEvent(ApplicationReadyEvent applicationReadyEvent)

加载图片时的2种方法

1,仅加载图片,图像数据不会缓存. NSString *path = [[NSBundle mainBundle] pathForResource:@”icon” ofType:@”png”]; UIImage *image = [UIImage imageWithContentsOfFile:path]; 或 NSString *filePath = [[NSBundle mainBundle] pathForResource:fileName ofType:“png”]; NSData *i

使用jQuery动态加载js脚本文件的方法

动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个js文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法.下面就介绍一下如何使用它! 一.jQuery getScript()方法加载JavaScript jQuery内置了一个方法可以加载单一的js文件:当加载完成后你可以

jquery加载页面的方法(页面加载完成就执行)

jquery加载页面的方法(页面加载完成就执行) jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){  $("#a").click(function(){  //adding your code here  }); }); 2.$(document).ready(function(){  $("#a").click(function(){  //a

[转]jquery加载页面的方法(页面加载完成就执行)

jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3