2020年8月第3周 - 智云健康前端技术每周文摘

文摘目录

• 原创
• 文章与新闻
• 推荐库
• 每周一练

原创

• 前端监控平台系列：JS SDK：手摸手教你写SDK
• JS引擎（一）：JS中的JIT与基本执行逻辑：搞懂JIT的执行逻辑

文章与新闻

• 使用纯Rust构建一个单页应用
• 如何学习一个框架？
• 图解 JavaScript——代码实现六种异步方案

推荐库

• React v17.0 RC：React17来了
• NPM v7 beta：NPM7测试版来了
• reactant v0.3.2：像angular一样使用React
• teki：TS极小的路由解析器

每周一练

要求

实现一个批量请求函数，支持最大并发量，每当有一个请求返回，就留下一个空位，可以增加新的请求，所有请求完成后，返回一个promise，结果按照 urls 里面的请求顺序依次打出。

/**
 * 
 * 实现一个批量请求函数 multiRequest(urls, maxNum)
 * @param {Array} urls 异步请求
 * @param {Number} maxNum 并发的最大数量
 * @param {Function} singleFetchOverCallback 单个执行完执行的回调函数，异步返回的数据作为入参
 */
function multiRequest(urls, maxNum, singleFetchOverCallback) {
}

示例：

/**
 * 模拟异步请求
 * @param {Number} delay 延迟秒数
 * @param {Any} result 返回数据
 */
function setTimeoutWithParam(delay, result) {
  return () => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(result);
      }, delay);
    });
  };
}
multiRequest(
  [
    setTimeoutWithParam(2000, 3),
    setTimeoutWithParam(1000, 1),
    setTimeoutWithParam(2000, 2),
    setTimeoutWithParam(4000, 4),
    setTimeoutWithParam(5000, 5),
    setTimeoutWithParam(6000, 6),
  ],
  5,
  res => {
    if (res === 5) {
      // 增加一个异步请求
      multiRequest.prototype.addUrl(setTimeoutWithParam(100, 7));
    }
    console.log('single', res);
  }
).then(res => {
  console.log('all over', res);
});

打印结果：

single 1
single 3
single 2
single 4
single 5
single 7
single 6
all over [
  1, 3, 2, 4,
  5, 7, 6
]