fetch 함수 질문입니다.

React React Native
1

post 상황에서 안드로이드에서 fetch 함수가 작동하지 않습니다. ios에서는 정상적으로 작동하고 get 함수역시 문제가 되지 않습니다.

현재 aws엘라스틱 빈스토크서버를 이용중이며 에러 메세지는 다음과 같습니다

Network request failed

  • node_modules/react-native/Libraries/vendor/core/whatwg-fetch.js:504:29 in onerror
  • node_modules/event-target-shim/lib/event-target.js:172:43 in dispatchEvent
  • … 8 more stack frames from framework internals

코드는 다음과 같습니다.

image

2

1 혹시 return된 fetch를 어떻게 사용하시나요? 보통

const result = await fetch(...).then(resp=>resp.json)

이렇게 사용하는데, 이렇게 프로미스 받아서 사용하시고 계신지 궁금합니다.
2. native에 대해서 아는 건 많이 없는데, 혹시 여기도 폴리필이 필요한지요?

1개의 좋아요
3

@11180 테스트 하신 안드로이드 폰의 경우 이미지 사이즈가 너무 커서 AWS EB의 설정의 upload limit에 걸린거 아닌가요? 이 이슈도 많이들 실수하는 부분입니다.

4

저도 어떻게 사용하고 계신지 궁금합니다. 특히 catch를 해보면 더 자세한 정보가 있을 것 같은데 혹시 저 위에 남겨주신 메시지가 catch의 메시지인가요?

리액트 네이티브의 경우 기본적으로 fetch 가 구현되어 있어요

5

fetch의 내용은 다음과 같습니다.

image
image.png918×1348 124 KB

6

테스트는 안드로이드 스튜디오 시뮬레이터와 갤럭시 단말기로 두 번 시행했고 모두 동일한 증상이 발생했습니다.
local서버에서 테스트 했을 때도 동일한 문제가 발생하였습니다. aws eb설정도 한번 확인해 보도록 하겠습니다!

7

조사를 좀 해봤는데요.

사용하시는 RN 버전이 어떻게 되시나요?
최근까지만 해도 안드로이드에서만 header의 content-type에 charset=utf-8을 자동으로 append하는 버그가 있었었네요. 0.59.1에서는 버그가 픽스 된 것 같은데…

8

제가 학식이 짧아서 이 문제를 혼자 해결하기 매우 버겁네요. 답변 정말 감사합니다. 저는 현재 expo를 사용하고 있습니다. 현재 expo의 경우 32.0.0 버전을 사용하고 있습니다. expo에서도 동일한 버그가 존재하는 것 같습니다. 버전을 다운그레이드 해야할까요? fetch함수 외에 대체로 사용할 수 있는 방법이 있을까요?

image
image.png1294×412 55.5 KB

9

만약에 그 버그가 맞다면 엑스포가 아직 0.59.1 업데이트를 따라잡진 못했네요 (참고). axios는 fetch와 거의 동일한 기능이지만 다른 패키지인데요. 한 번 그걸로 바꿔보시는 것도 좋을 것 같네요.

사실 저도 리액트 네이티브는 한 번도 안해봐서 여기까지가 제가 도와드릴 수 있는 정도인 것 같습니다 ^^; 제 답변이 도움이 되었다면 좋겠네요.

10

네트워크의 요청을 못보낸다거나 응답을 받지 못하는 경우에는 다음과 같은 사항을 살펴보면 대부분 원인을 알 수 있었습니다.

  • 클라이언트의 에러 로그
  • 서버의 에러 로그
  • 클라이언트의 http request/response 열어 보기 (charles 같은 프록시 사용)
  • android emulator에서 localhost 서버를 바라볼 때 adb reverse 설정을 했는지 확인
11

너무 감사합니다. axios로 시도해 보도록 하겠습니다!!

12

감사합니다!!!

14

많이 쓰는 fetch방식이랑은 다른것 같습니다. 제의 예제를 보여드리면

let formdata = new FormData();
    formdata.append("type", "login");
    formdata.append("app_id", "123456789");
    fetch(this.state.uri, {
      method: "POST",
      body: formdata,
      headers: {
        "Content-Type": "multipart/form-data",
        api_key: this.state.apikey,
        game_key: this.sate.gamekey
      }
    })
      .then(res => res.json())
      .then(response => {
        if (response.resultCode == "S000") {
           setRegisterData(response.result);  
          let registerdata = {
            user_id: response.result.nick_name,
            member_seq: response.result.seq_no,
            provider_status: response.result.provider_status
          };
        } else {
      alert("에러");
        }
      })
      .catch(error =>
      alert(error);
      );