一次异步处理
前言
今天回忆了一下在做项目的时候遇到的一个小问题。就是当两个接口请求的数据相互没有影响时,而你却需要这两个接口的所有数据,你会怎么做呢?
第一种方案
当我处理这个的时候想到的第一个方案是这样的。由于两个接口相互没有影响,我使用了一个中间量进行判断。代码是这样写的。
var flag=2;
//请求数据1
function ajax(callback) {
//开始请求数据
setTimeout(()=> {
//请求接收,假设数据是
let data = {
result:1,
txt: '请求成功',
name: '小小坤'
}
flag--;
if(!flag){
callback();
}
}, 1000);
}
//请求数据2
function ajax1(callback) {
//开始请求数据
setTimeout(()=> {
//请求接收,假设数据是
let data = {
result:1,
txt: '请求成功',
age: 18
}
flag--;
if(!flag){
callback();
}
}, 2000);
}
ajax(show);
ajax1(show);
function show(datas) {
console.log('-- 在这里再进行处理 --');
}
简单粗暴的解决掉了,同时这种方式耗时是 max(ajax,ajax1);
第二种方案(算是优化)
let toString=Object.prototype.toString;
/**
* timer {Number} 次数
* callback {Function} 回掉函数
*/
function after(timer, callback) {
if(toString.call(timer)!=="[object Number]") throw ('timer is Number');
if(timer<=0) throw ('timer minimum is 1');
if(toString.call(callback)!=="[object Function]") throw ('callback is Function');
let results=[];//结果
return (...arg) =>{
results.push(arg);
if (--timer == 0) {
callback(results);
results.length=0;
}
}
}
let out = after(2, (allResults)=> {
show(allResults);
});
//请求数据1
function ajax(callback) {
//开始请求数据
setTimeout(()=> {
//请求接收,假设数据是
let data = {
result:1,
txt: '请求成功',
name: '小小坤'
}
out(data);
}, 1000);
}
//请求数据2
function ajax1() {
//开始请求数据
setTimeout(()=> {
//请求接收,假设数据是
let data = {
result:1,
txt: '请求成功',
age: 18
}
out(data);
}, 2000);
}
ajax();
ajax1();
function show(datas) {
console.log(datas[0],'-- 所有结果,在这里再进行处理 --');
console.log(datas[1],'-- 所有结果,在这里再进行处理 --')
}
总结
以上方案算是最基本的解决方案,比如 观察者模式、Generator 函数、Promise、async/await
都可以处理这样的业务。
代码是一种神奇的东西,我们可以驱动它干好多事情。为什么我们不好好做一个控制者呢!!
打赏作者通道↓↓↓
如果觉得这篇文章不错的话!点击推荐支持一下哦!!!