面试官:如果一个页面打开时需要请求100次接口,如何进行优化

前言

本文仅作为抛砖引玉的砖,如果有纰漏或者错误,敬请谅解

面试官:我有一个页面,假设页面打开时有一百个接口需要请求,如何优化？

我:面试官,您问出这种问题是故意的还是不小心的

面试官:故意的,只是假设而已

我:我先去和后端打一架

问题分析

首先,由于ie,火狐,chrome一个浏览器最多同时发起6个请求,所以肯定不能同时发送100个请求,因为用户在95个请求完成之前新发送的请求将会卡住,用户体验感很差

例如:

明显可以看到用户的login请求被放置在最后,状态为待处理,需要等待前面的请求完成才能继续

解决方案

• 抛个砖,求大佬给个更高效的解决方案

export interface Request{
    url:string
    options:object
}
//requestList:请求的地址与参数
//maxRequest:同时请求数量
//resultList:请求结果
export function moreRequest(requestList:Array<Request>,maxRequest:number,resultList:Array<any>){
    if(requestList.length===0||!Array.isArray(requestList)||maxRequest<1){
        return
    }
    //储存已经发送过的请求
    const requestedList:Array<Request>=[]
    //当前请求下标
    let currentRequestIndex=0
    async function fetchLoop(){
        //将下标指向未发送的请求,如果全部请求完毕,则结束
        while(currentRequestIndex<=requestList.length){
            if(currentRequestIndex===requestList.length){
                return
            }
            else if(requestedList.indexOf(requestList[currentRequestIndex])===-1) {
                requestedList.push(requestList[currentRequestIndex])
                break
            }
            currentRequestIndex++
        }
        //发送请求
        await fetch(requestList[currentRequestIndex].url,requestList[currentRequestIndex].options).then((resp:Response)=>{
            if(result.status===200){
                return resp.json()
            }
            else{
                return resp.status
            }
        }).then((result:any)=>{
            resultList.splice(currentRequestIndex,0,resultJson)
        }).catch((error:Error)=>{
            resultList.splice(currentRequestIndex,0,error.message)
        })
        //当前请求完成后则进入执行下一次循环
        fetchLoop()
    }

    //创建多个能循环发送请求的函数
    for (let i = 0; i < requestList.length && i < maxRequest; i++) {
        fetchLoop()
    }
}

末尾

新人鼓起勇气第一次在掘金上发文,希望大佬不要过度嘲讽,谢谢