react-native fetch 의 구체 적 인 사용 방법

전단 이 신속히 발전 하 는 과정 에서 더 좋 은 디자인 모델 에 부합 하기 위해 fetch 프레임 워 크 가 생 겼 습 니 다.이 글 은 fetch 의 기본 적 인 사용 을 간략하게 소개 할 것 입 니 다.
AJAX 시대 에 요청 API 등 네트워크 요청 을 하 는 것 은 모두 XML HttpRequest 나 포 장 된 프레임 워 크 를 통 해 네트워크 요청 을 하 는 것 이 었 다.
현재 발생 하 는 fetch 프레임 워 크 는 더욱 강력 하고 효율 적 인 네트워크 요청 을 제공 하기 위해 생 겨 난 것 입 니 다.비록 현재 브 라 우 저 호 환 문제 가 있 을 수 있 지만 우리 가 Hybrid App 개발 을 할 때 제 가 전에 소개 한 Ionic 과 React Native 는 fetch 로 완벽 한 네트워크 요청 을 할 수 있 습 니 다.
fetch 첫 체험
Chrome 브 라 우 저 에 서 는 fetch 함 수 를 전역 적 으로 지원 합 니 다.디 버 깅 도 구 를 열 면 Console 에서 초기 체험 을 할 수 있 습 니 다.도 메 인 간 요청 의 사용 방법 을 고려 하지 않 고 같은 도 메 인 자원 을 요청 합 니 다.예 를 들 어 제 블 로그 페이지 에서 Console 을 열 어 다음 과 같은 요청 을 합 니 다.

fetch("http://blog.parryqiu.com").then(function(response){console.log(response)})

되 돌아 오 는 데이터:

이렇게 해서 네트워크 요청 을 신속하게 완 료 했 습 니 다.우 리 는 돌아 오 는 데이터 도 이전의 XML HttpRequest 보다 풍부 하고 사용 하기 쉬 운 것 을 발 견 했 습 니 다.
fetch 표준 개관
비록 fetch 는 아직 안정 적 인 기준 으로 발표 되 지 않 았 지만,계속 갱신 되 는 표준 설명 에서 우 리 는 이미 많은 좋 은 것 을 포함 하고 있다 는 것 을 발견 했다.
fetch 는 HTTP Method,HTTP Headers,Request,Response 등 대부분의 상용 HTTP 요청 과 HTTP 표준 호 환 을 지원 합 니 다.
fetch 사용
fetch 의 입구 함수 정 의 는 nodemodules/whatwg-fetch.js 파일 중 다음 과 같 습 니 다.

 self.fetch = function (input, init) {
  return new Promise(function (resolve, reject) {
   var request = new Request(input, init)
   var xhr = new XMLHttpRequest()
   xhr.onload = function () {
    var options = {
     status: xhr.status,
     statusText: xhr.statusText,
     headers: parseHeaders(xhr.getAllResponseHeaders() || '')
    }
    options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL')
    var body = 'response' in xhr ? xhr.response : xhr.responseText
    resolve(new Response(body, options))
   }
   xhr.onerror = function () {
    reject(new TypeError('Network request failed'))
   }
   xhr.ontimeout = function () {
    reject(new TypeError('Network request failed888888888888'))
   }
   xhr.open(request.method, request.url, true)
   if (request.credentials === 'include') {
    xhr.withCredentials = true
   }
   if ('responseType' in xhr && support.blob) {
    xhr.responseType = 'blob'
   }
   request.headers.forEach(function (value, name) {
    xhr.setRequestHeader(name, value)
   })
   xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit)
  })
 }

이 함 수 는 Network/fetch.js 에서 내 보 내 졌 으 며,최종 적 으로 initializeCore.js 에서 global 로 등 록 된 속성 은 전역 함수 로 변 경 됩 니 다.fetch 가 돌아 온 것 은 Promise 입 니 다.
방법 에 따라 XMLHttpRequest.js 의 send->RCTNetworking.ios.js 의 sendRequest->최종 적 으로 원생 단 RCTNetworking.mm 의 sendRequest 방법 을 호출 합 니 다.
관련 질문:
1.왜 fetch 함수 가 timeout 을 설정 할 수 없 습 니까?
fetch 의 timeout 을 설정 하기 위해 서 저 는 다음 과 같은 함 수 를 정의 할 것 입 니 다.

 _timeout_fetch(fetch_promise, timeout = 15000) {
  let timeout_promise = new Promise(function (resolve, reject) {
   setTimeout(() => {
    reject('timeout promise');
   }, timeout)
  });
  return Promise.race([
   fetch_promise,
   timeout_promise
  ]);
 }

그리고 다음 과 같이 호출 합 니 다.

 this._timeout_fetch(
    fetch(url, requestParams)
     .then(response => response.json())
     .then(responseData => {
      resolve(responseData);
     })
     .catch(error => {
      reject(error);
     })
   )

시간 초과 가 끝 난 후에 reject 를 정의 합 니 다.이 Promise 와 fetch 를 Promise.race 에 통합 하면 이 두 요청 을 누가 먼저 실행 하 는 지,다른 하 나 는 버 려 집 니 다.이렇게 시간 초과 설정 을 완성 합 니 다.
그러나 원본 코드 를 보면 oc 에 시간 초과 설정 이 있 고 js 와 oc 가 통신 할 때 도 이 매개 변 수 를 전 달 했 습 니 다.문 제 는 입구 함수 fetch 에서 나 왔 습 니 다.위 fetch 방법 에 다음 과 같이 추가 해 야 합 니 다.

 xhr.timeout = init.timeout || 0;

요청 매개 변수 에 시간 초과 설정 을 할 수 있 습 니 다.예 를 들 어

 let requestParams = {
   method: method,
   header: {
    "Content-Type": "application/json;charset=UTF-8",
   },
   timeout: 1000
  };

2.fetch 함 수 는 왜 cancel 을 할 수 없 습 니까?
fetch 는 네 이 티 브 엔 드 에서 NSURLSession DataTask 가 보 낸 요청 입 니 다.이것 은 취소 할 수 있 습 니 다.js 단의 XML HttpRequest.js 에서 도 abort 방법 을 발 견 했 습 니 다.호출 은 현재 네트워크 요청 을 취소 할 수 있 습 니 다.문 제 는 fetch 의 인터페이스 함수 에 있 습 니 다.
우선,취 소 를 요청 하려 면 현재 요청 에 대응 하 는 requestId 를 받 아야 합 니 다.요청 의 실행 순 서 는 js 엔 드 시작->OC 에서 Request 를 생 성하 고 requestId 를 받 습 니 다.NSURLSession DataTask 를 이용 하여 요청->requestId 를 리 셋 형식 으로 js 엔 드 에 전송 합 니 다.js 가 이 요청 을 취소 하려 면 abort 방법 을 실행 하면 됩 니 다.
fetch 함수 가 cancel 을 실행 하려 면 이 방법 으로 XML HttpRequest 대상 을 되 돌려 주면 됩 니 다.하지만 그 건 더 이상 Promise 가 아니다.
돌아 오 는 Promise 대상 에 cancel 방법 을 연결 할 수도 있 습 니 다.수정 방법 은 다음 과 같 습 니 다.

 self.fetch = function (input, init) {
  var xhr = new XMLHttpRequest()
  let p = new Promise(function (resolve, reject) {
   var request = new Request(input, init)
   // xhr     ，   
  })
  p.cancel = () => {
   xhr.abort()
  }
  return p;
 }

이렇게 호출 할 때 는 비교적 악습 이 있다.다음 과 같다.

  let promise = fetch(url);
  promise.then(res => {
  }).then(res => {
  }).catch(err => {
  })
  promise.cancel() //        

fecth().then().then()모드 를 호출 할 수 없습니다.이 로 인해 되 돌아 오 는 Promise 는 더 이상 cancel 에 연 결 된 Promise 가 아 닙 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.