博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
记一道控制并行数的前端面试题
阅读量:5874 次
发布时间:2019-06-19

本文共 2434 字,大约阅读时间需要 8 分钟。

题目:请实现如下函数,可以批量请求数据,所有的 url 地址在 urls 参数中,同时可以通过 max 参数控制请求的并行数,当所有请求结束之后,需要执行 callback 回调函数,发送请求的函数可以直接使用 fetch 即可

function sendRequest(urls: strind[], max: number, callback: () => void) {}复制代码

思路分析:

  1. 通过批量并且当所有请求结束后,在执行 callback 我们初步确定使用 Promise.all 可以实现此功能,
  2. 由于请求地址在 urls 数组中,因为是一个并行的问题,所以我们可以将请求地址进行按照 max 来进行分组,最后得到多少组就执行多少次请求

具体代码实现:

let bodyElement = document.body    let urls = [      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2580986389,1527418707&fm=27&gp=0.jpg',      'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1995874357,4132437942&fm=27&gp=0.jpg',      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2640393967,721831803&fm=27&gp=0.jpg',      'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1548525155,1032715394&fm=27&gp=0.jpg',      'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2434600655,2612296260&fm=27&gp=0.jpg',      'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2160840192,133594931&fm=27&gp=0.jpg'    ]    let max = 4    let callback = () => {      console.log('所有请求完成了')    }    // 定义一个分组函数 已 max 为最大个数存储在一个对象中    let group = (urls, max) => {      let groupObj = {}            urls.forEach((item, index) => {        let group = parseInt(index / max)        if (groupObj[group]) {          return groupObj[group].push(item)        }        groupObj[group] = [item]      })            return groupObj    }        function sendRequest(urls, max, callback) {      let groupResult = group(urls, max)      let currentIndex = 0      // 使用 fetch 封装请求      let getFetch = source => {        return source.map(item => fetch(item).then(res => res.blob()))      }      let send = () => {        //  判断有没有当前组        groupResult[currentIndex] &&        Promise.all(getFetch(groupResult[currentIndex]))          .then((body) => {            callback()            currentIndex++            console.log(body, `第${currentIndex}次批量请求成功`)                        let html = ''                        body.forEach(item => {              html += ``            })            bodyElement.innerHTML += html                        // 用延时器是因为反应接口太快 以便于观察            setTimeout(() => {              send()            }, 1000)          })          .catch((err) => {            console.log('error')          })      }      send()    }        sendRequest(urls, max, callback)复制代码
功能已实现,大家有什么好的实现方法可以评论下,敬请指教。复制代码

转载于:https://juejin.im/post/5c889a2b5188257edb45e603

你可能感兴趣的文章
SpringMVC系列(十六)Spring MVC与Struts2的对比
查看>>
20061008: IntelliJ Idea 6
查看>>
Android IOS WebRTC 音视频开发总结(四一)-- QQ和webrtc打洞能力pk
查看>>
Immediately register your GHD frizzy hair straightener concerning the GHD web page
查看>>
清除Xcode缓存
查看>>
Sharepoint2013:在页面上显示错误信息
查看>>
8-2测试总结
查看>>
SQLiteDatabase中query、insert、update、delete方法参数说明
查看>>
将军令
查看>>
多线程实现端口扫描
查看>>
java 类的应用
查看>>
koa cookie使用
查看>>
shutdown immediate ,无法关闭数据库的解决方案
查看>>
CentOS7系统上的GPSTK源码安装
查看>>
三种样式表
查看>>
Eclipse 常用快捷键(动画讲解)
查看>>
python pandas 数据处理
查看>>
[Learn AF3]第七章 App framework组件之Popup
查看>>
Java SE 第二十三讲----static关键字and final关键字
查看>>
微信小程序开发的游戏《拼图游戏》
查看>>