Fetch 요청에 대한 시간 초과 설정 및 종료 요청
XMLHttpRequest를 사용하면 요청 시간 초과를 설정할 수 있지만 Fetch를 사용한 후 시간 초과 설정이 보이지 않습니다. 네트워크가 신뢰할 수 없는 상황에서 시간 초과 설정이 유용합니다.
ES6 이후 Promise는 지옥회조를 해결하는 등 우아하지 않은 코드 스타일을 선보였다.개인이 이해하는 것은 생산자와 소비자의 관계와 같다. Promise 문서를 보면 다음과 같은 두 가지 방법이 있다.
이상의 지식이 있으면 함수 setTimeout을 결합하면 시간 초과 설정을 실현할 수 있다
먼저 다음 사고방식을 소개하는데 핵심은 시간을 초과한timeoutPromise와 인터페이스를 구축하여 요청하는fetchPromise를 이용하여 Promise에 전달하는 것이다.race()에서 처리합니다.어떤 Promise가 결과를 먼저 반환하면 이 Promise의 반환 값을 최종적으로 출력합니다.구체적으로 다음과 같습니다.
timeoutPromise 만들기
let timeoutPromise = (timeout)=> {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(' ');
}, timeout)
})
};
fetchPromise 만들기
let fetchPromise=fetch(url,prama)
Promise로 전송합니다.race().이 중 가장 빨리 완성된 Promise는 Promise 결과를 되돌려줍니다. 출력된 Promise는resultPromise입니다.
Promise.race([timeoutPromise(2000),fetchPromise(url)])
.then(resp=>{
console.log(resp);
})
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.