Promise 等待多个接口返回数据再执行操作

简介: Promise 等待多个接口返回数据再执行操作

范例2

function getOnlinePerson(){
    //模拟
    return new Promise(function(resolve,reject){
        var onlinePerson = Math.ceil(Math.random()*1000)
        setTimeout(function(){
            resolve(onlinePerson)
        },Math.random()*1000)
    })
   
}
function getRegPerson(){
    //模拟
    return new Promise(function(resolve,reject){
            var RegPerson = Math.ceil(Math.random()*1000)+1000
            setTimeout(function(){
                resolve(RegPerson)
            },Math.random()*1000)
            })
  
}
 
function calOnlinePercent(onlinePerson,RegPerson){
    return new Promise(function(resolve,reject){ 
        var percent = Math.ceil(onlinePerson/RegPerson*100)
        setTimeout(function(){
            resolve(percent)
        },Math.random()*1000)
    })
}
 
Promise.all([getOnlinePerson(),getRegPerson()]).then(function([onlinePerson,RegPerson]){
    //这里写等这两个ajax都成功返回数据才执行的业务逻辑
     calOnlinePercent(onlinePerson,RegPerson).then(function(percent){
        console.log(percent)
     })
})

范例3 -- 利用js回调嵌套实现(不使用Promise

//  异步接口1:返回当天在线用户数
function getOnlinePerson(callback){
    //模拟实现
    var onlinePerson = Math.ceil(Math.random()*1000)
    setTimeout(function(){
        callback(onlinePerson)
    },Math.random()*1000)
}
 
//异步接口2:返回当天总注册用户数
function getRegPerson(callback){
    //模拟实现
    var RegPerson = Math.ceil(Math.random()*1000)+1000
    setTimeout(function(){
        callback(RegPerson)
    },Math.random()*1000)
}
 
//异步接口,返回当天在线人数比,需要前两个接口的数据
function calOnlinePercent(onlinePerson,RegPerson,callback){
    //模拟实现
    var percent = Math.ceil(onlinePerson/RegPerson*100)
    setTimeout(function(){
        callback(percent)
    },Math.random()*1000)
}
 
function total(){
  getOnlinePerson(function(onlinePerson){
       getRegPerson(function(RegPerson){
            calOnlinePercent(onlinePerson,RegPerson,function(percent){
                  console.log(percent)  //此处执行操作,打印最后结果
        })
    })
})
}
目录
相关文章
|
6月前
|
数据采集 前端开发
突破技术限制:使用 request-promise 库进行美团数据获取
本文展示了如何用`request-promise`爬取美团数据,重点是通过代理IP避免封禁。安装库后,配置含代理的请求选项,如`proxy`, `auth`和`headers`,并用`cheerio`解析HTML获取餐厅菜单。通过代理服务可以提高爬虫效率。
241 0
突破技术限制:使用 request-promise 库进行美团数据获取
|
4月前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
198 1
|
4月前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
54 1
|
4月前
|
前端开发
前后端数据交互-----ncaught (in promise) TypeError: this.registerAPI is not a function
前后端数据交互-----ncaught (in promise) TypeError: this.registerAPI is not a function
|
5月前
|
JavaScript 前端开发
在vue中循环中调用接口-promise.all();按顺序执行异步处理
在vue中循环中调用接口-promise.all();按顺序执行异步处理
|
6月前
|
前端开发 小程序
微信小程序异步请求数据promise方法
微信小程序异步请求数据promise方法
|
JavaScript 前端开发 API
vue项目中配置简单的代理与promise,并简单封装请求接口
vue项目中配置简单的代理与promise,并简单封装请求接口
57 0
|
JavaScript 索引
vue:axios二次封装,接口统一存放、封装jsonp+promise
基于框架:vue 一、基于http库:axios 基本用法: 1.通过node安装:npm install axios   2. 在项目目录的src文件夹下新建apis文件夹,在该文件夹内新建index.
2919 0
|
JSON 前端开发 数据格式
牛客刷题——前端面试【三】谈一谈Promise、封装ajax、json数据使用
如何使用Promise、封装ajax、json数据以下方法告诉你。
191 0
|
JSON 前端开发 数据格式
ES6中 Promise 概念、基本用法和封装ajax(json数据使用)
Promise是异步编程的一种解决方案,可以替代传统的解决方案--回调函数和事件。ES6统一了用法,并原生提供了Promise对象。
202 0

热门文章

最新文章