Published
Edited
Sep 10, 2021
Insert cell
md`# 多个异步请求按照顺序返回`
Insert cell
md`假设有参数为srcs的一组请求`
Insert cell
srcs = [1,2,3,4,5,6,7,8,9];
Insert cell
md`模拟网络请求`
Insert cell
fetchData = (id)=>{
return new Promise((resolve)=>{
const timeout = parseInt(Math.random() * 10) * 100;
setTimeout(()=>{
resolve(id);
},timeout);
});
}
Insert cell
md`输出函数`
Insert cell
output = ({index:point},srcMaps) => {
// 筛选出符合条件的输出:状态为初始状态&&对应的索引值小于等于传入的索引
const activeData = srcMaps.filter(({ status,index }) => {
return index <= point && status === 'init';
});
activeData.forEach((item) => {
// 更新状态
item.status = 'completed';
console.log(item.src);
});
}
Insert cell
md`发送请求`
Insert cell
request = (item,srcMaps) => {
const { src } = item;
fetchData(src).then((res) => {
item.res = res;
// 处理输出
output(item,srcMaps)
});
}
Insert cell
md`主函数`
Insert cell
function main(){
const srcMaps = srcs.map((src,index) => {
return {
src,
index,
status:'init',
res:null,
}
});

for(let i=0,len=srcMaps.length;i<len;i++){
request(srcMaps[i],srcMaps);
}
}
Insert cell
main();
Insert cell
html`
<div>
<p id="pvalue"></p>
</div>
`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more