react-native——fetch

fetch의 입구 함수는 node_에 정의됨modules/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에서 내보내집니다. 최종적으로 initialize Core에 있습니다.js에서 글로벌로 등록된 속성이 전역 함수로 변경됩니다.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에 통합합니다.레이스에서 이 두 가지 요청을 누가 먼저 실행하면 다른 하나는 버려진다.이렇게 하면 시간 초과 설정을 완성할 수 있다.그러나 원본 코드를 보면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는 원본에서 NSURLSessionDataTask에서 요청한 것으로 취소할 수 있습니다.js 끝에 있는 XMLHttpRequest.js에서도 현재 네트워크 요청을 취소할 수 있는abort 방법을 발견했습니다.문제는fetch의 인터페이스 함수에서 나왔습니다.우선, 요청을 취소할 수 있으려면 현재 요청에 대응하는requestId를 받아야 합니다.요청의 실행 순서는 js단 발기->OC에서 Request를 생성하고 requestId를 얻으며 NSURLSessionDataTask를 이용하여 요청->을 발기하여 requestId를 리셋 형식으로 js단에 전송합니다. js가 이 요청을 취소하려면abort 방법을 실행하면 됩니다.fetch 함수가 cancel을 실행하려면 이 방법으로 XMLHttpRequest 대상을 되돌려주면 됩니다.하지만 그렇다면 더 이상 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가 아니기 때문입니다.