바이트 댄스 면접 어떻게 JS로 Ajax 병렬 요청 제어

앞말

정말이지, 요즘도 막막해.기술에 대해서, 생활에 대해서.큰 공장에 있는 친구들도 많이 찾아서 이야기를 나누었고 후기 발전의 방향을 필요로 했다.그중에서도 면접에 대한 이야기가 나왔고, 채용에서 면접자에게 줄 몇 가지 문제에 대해서도 이야기했다.나도 마침 오랫동안 면접을 보지 못해서 그 중에서 몇 가지를 골랐다.최근에도 일련의 면접 문제에 대한 해석이 속속 나올 것이다.
오늘은 바이트가 뛴다.
대량 요청 함수 multiRequest(urls, maxNum)를 실현하려면 다음과 같이 하십시오.
• 최대 동시 수 maxNum 필요
• 요청이 돌아올 때마다 빈 자리를 남겨 새로운 요청을 추가할 수 있습니다
• 모든 요청이 완료되면 결과는 urls 안의 순서대로
이 문제는 많은 학우들이 많든 적든 본 적이 있을 거라고 생각합니다. 다음에 저는 차례대로 나타난 장면, 문제의 분석에서 최종적인 실현까지 이 문제의 완전한 해석을 깊이 있게 하고자 합니다.

장면

만약에 지금 이런 장면이 있다고 가정하면 현재 30개의 비동기 요청이 발송되어야 하지만 일부 원인으로 인해 우리는 같은 시각의 동시 요청 수량을 5개 이내로 제어해야 하며 가능한 한 신속하게 응답 결과를 얻어야 한다.
어떻게 해야 돼요?
우선 Ajax의 직렬과 병렬에 대해 알아보겠습니다.

Promise 기반.all Ajax의 직렬 및 병렬 구현

우리는 평소에promise를 바탕으로 비동기 요청을 봉인하는데, 여기서도 주로 비동기 요청을 대상으로 전개한다.

직렬: 비동기 요청이 끝난 후에 다음 요청을 진행합니다

병렬: 여러 비동기 요청이 동시에 진행

몇몇 promise 실례를 정의하여 직렬/병렬을 구체적으로 보여 줍니다.
직렬

var p = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log("1000");
      resolve();
    }, 1000);
  });
};
var p1 = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log("2000");
      resolve();
    }, 2000);
  });
};
var p2 = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log("3000");
      resolve();
    }, 3000);
  });
};

p()
  .then(() => {
    return p1();
  })
  .then(() => {
    return p2();
  })
  .then(() => {
    console.log("end");
  });

예를 들어 직렬은 위에서 아래로 인터페이스 요청을 실행합니다.
병행
일반적으로 우리는 코드가 여러 비동기적으로 처리된 후에 실행될 것을 보증해야 한다.

Promise.all((promises: [])).then((fun: function));
Promise.all ，promises promise resolve ， then 。

var promises = function () {
  return [1000, 2000, 3000].map((current) => {
    return new Promise(function (resolve, reject) {
      setTimeout(() => {
        console.log(current);
      }, current);
    });
  });
};

Promise.all(promises()).then(() => {
  console.log("end");
});

Promise.all 병렬 제한

이때 하나의 장면을 고려한다. 만약promises 그룹의 모든 대상이 http 요청이고 이런 대상은 수십만 개이다.
그러면 순식간에 수십만 개의 http 요청을 보내면 수많은 호출 창고가 쌓여 메모리가 넘칠 가능성이 높다.
이때, 우리는 Promise에 대해 고려해야 한다.all 병행 제한.
Promise.all 병발 제한은 매 시간 병발 실행의promise 수량이 고정되어 최종 실행 결과는 원래의 Promise와 유지된다는 것을 가리킨다.all 일치.
제목 실현
사고방식 분석
전체적으로 귀속 조정으로 이루어진다. 처음에 보낸 요청 수량의 상한선은 허용된 최대값이고 이 요청 중의 하나하나는 완성될 때 계속 귀속 발송해야 한다. 전송된 색인을 통해 urls 안에 구체적으로 그 URL이 있는지 확인하고 마지막 출력의 순서가 흐트러지지 않고 순서대로 출력해야 한다.
코드 구현

function multiRequest(urls = [], maxNum) {
  //  
  const len = urls.length;
  //  
  const result = new Array(len).fill(false);
  //  
  let count = 0;

  return new Promise((resolve, reject) => {
    //  maxNum 
    while (count < maxNum) {
      next();
    }
    function next() {
      let current = count++;
      //  
      if (current >= len) {
        //  promise ,  result promise 
        !result.includes(false) && resolve(result);
        return;
      }
      const url = urls[current];
      console.log(`  ${current}`, new Date().toLocaleString());
      fetch(url)
        .then((res) => {
          //  
          result[current] = res;
          console.log(`  ${current}`, new Date().toLocaleString());
          //  ,  
          if (current < len) {
            next();
          }
        })
        .catch((err) => {
          console.log(`  ${current}`, new Date().toLocaleString());
          result[current] = err;
          //  ,  
          if (current < len) {
            next();
          }
        });
    }
  });
}

총결산

바이트 댄스 면접에서 JS로 Ajax 병발 요청 제어를 어떻게 하는지에 대한 이 글은 여기까지 소개되었습니다. 더 많은 관련 JS 병발 요청 제어 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!