Fetch 요청에 대한 시간 초과 설정 및 종료 요청

1414 단어 ReactNative
최근에 사용자 정의 서버 주소와 관련된 프로젝트를 하고 있습니다. 이 서버 주소는 검증이 필요합니다.원래 요청한 것은fetch입니다.fetch 자체가 시간 초과 처리를 지원하지 않기 때문에 비교적 작은 변동이 시간 초과 문제를 실현할 수 있도록 연구했습니다.
XMLHttpRequest를 사용하면 요청 시간 초과를 설정할 수 있지만 Fetch를 사용한 후 시간 초과 설정이 보이지 않습니다. 네트워크가 신뢰할 수 없는 상황에서 시간 초과 설정이 유용합니다.
ES6 이후 Promise는 지옥회조를 해결하는 등 우아하지 않은 코드 스타일을 선보였다.개인이 이해하는 것은 생산자와 소비자의 관계와 같다. Promise 문서를 보면 다음과 같은 두 가지 방법이 있다.
  • Promise.race([promise1,promise2])는 여러 개의 Promise 대상에 전송되어 가장 빠른 대상이 완성되기를 기다립니다
  • Promise.all ([promise1,promise2]) 은 모든 객체가 완료될 때까지 여러 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);
                })

    좋은 웹페이지 즐겨찾기