React Native 는 네트워크 요청 을 Fetch 로 보 내 는 예제 코드 를 사용 합 니 다.

저 희 는 프로젝트 에 HTTP 요청 을 자주 사용 합 니 다.HTTP(HTTPS)요청 은 보통'GET','PUT','POST','DELETE'로 나 뉘 는데 기본 값 을 GET 요청 으로 지정 하지 않 으 면 됩 니 다.
프로젝트 에서 우리 가 자주 사용 하 는 것 은 보통 GET 와 POST 두 가지 요청 방식 입 니 다.매개 변수 가 있 는 폼 에 대해 이러한 요청 을 제출 할 때 저 희 는 POST 의 요청 방식 을 사용 합 니 다.
HTTP 요청 을 보 내기 위해 서 는 React Native 가 제공 하 는 Fetch API 를 사용 해 야 합 니 다.임의의 주소 에서 내용 을 가 져 오 려 면 간단하게 인터넷 주 소 를 매개 변수 로 fetch 방법 에 전달 하면 됩 니 다.
GET
GET 방법 을 통 해 데 이 터 를 요청 하고 JSON 으로 전환 하려 면 다음 코드 를 통 해 이 루어 질 수 있 습 니 다.

fetch('https://facebook.github.io/react-native/movies.json')
   .then((response) => response.json())
   .then((responseJson) => {
    return responseJson.movies;
   })
   .catch((error) => {
    console.error(error);
   });

위의 요청 을 통 해 되 돌아 오 는 Response 를 JSON Object 로 바 꾼 다음 JSON Object 의 movies 필드 를 꺼 냅 니 다.또한 네트워크 가 통 하지 않 거나 접속 오류 등 오류 가 발생 하면.catch 에 의 해 발생 합 니 다.정상 적 인 상황 에서 우 리 는 다음 과 같은 결 과 를 얻 을 수 있다.

{
 "title": "The Basics - Networking",
 "description": "Your app fetched this from a remote endpoint!",
 "movies": [
  { "title": "Star Wars", "releaseYear": "1977"},
  { "title": "Back to the Future", "releaseYear": "1985"},
  { "title": "The Matrix", "releaseYear": "1999"},
  { "title": "Inception", "releaseYear": "2010"},
  { "title": "Interstellar", "releaseYear": "2014"}
 ]
}

POST(1)
물론 위 는 가장 기본 적 인 GET 요청 이 고 Fetch 는 선택 할 수 있 는 두 번 째 매개 변수 가 있 으 며 HTTP 요청 의 인 자 를 맞 출 수 있 습 니 다.Headers 인 자 를 지정 하거나 POST 방법 을 사용 하거나 데 이 터 를 제출 하 는 등 을 지정 할 수 있 습 니 다.Fetch API 는 사용자 정의 Headers,Method 교체,Body 추가 등 을 지원 합 니 다.

let url = "http://www.yousite.com/xxxx.ashx” 
let params = {"name":"admin","password":"admin"}; 
fetch(url, {
 method: 'POST',
 headers: {
  'Accept': 'application/json',
  'Content-Type': 'application/json',
 },
 body: JSON.stringify(params)
})

위 에 기본 적 인 POST 요청 을 구축 하고 자신의 Headers:Accept 와 Content-Type 을 추가 하 며 Body 를 추가 합 니 다.
POST(2)

let url = "http://www.yousite.com/xxxx.ashx”; 
let params = "username=admin&password=admin”; 
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: params,
}).then((response) => {
  if (response.ok) {
    return response.json();
  }
}).then((json) => {
  console.log(json)
}).catch((error) => {
  console.error(error);
});

POST(3)추천
위의 두 가지 방법 을 통 해 우 리 는 POST 요청 을 보 낼 수 있 는 방법 이 있 습 니 다.물론 이런 방식 도 추천 되 어 사 용 됩 니 다.
서버 가 위의 POST 데이터 형식 을 인식 하지 못 하면 전통 적 인 form 형식 을 시도 할 수 있 습 니 다.예 를 들 어 다음 과 같 습 니 다.

let REQUEST_URL = 'http://www.yousite.com/xxxx.ashx';

// `            FormData，      `

let parameters = new FormData();
parameters.append("mt", "30013");
parameters.append("pg", "1");
parameters.append('ps', '20');


fetch(REQUEST_URL, {
  method: 'POST',
  body: parameters
}).then(
  (result) => {
    if (result.ok) {
      console.log(result)
      result.json().then(
        (obj) => {
          console.log(obj)
        }
      )
    }
  }
).catch((error) => {
  console.log(error)
  Alert.alert('Error')
})

이런 방법 을 추천 하 는 장점 중 하 나 는 FormData 에서 바이트 흐름 을 직접 전달 하여 사진 을 올 리 는 기능 을 실현 할 수 있다 는 것 이다.코드 는 다음 과 같다.

uploadImage(){ 
 let formData = new FormData(); 
 let file = {uri: uri, type: 'multipart/form-data', name: 'a.jpg'}; 

 formData.append("images",file); 

 fetch(url,{ 
  method:'POST', 
  headers:{ 
    'Content-Type':'multipart/form-data', 
  }, 
  body:formData, 
 }) 
 .then((response) => response.text() ) 
 .then((responseData)=>{ 

  console.log('responseData',responseData); 
 }) 
 .catch((error)=>{console.error('error',error)}); 

}

서버 응답 데이터 처리
위의 예 는 어떻게 요청 하 는 지 보 여 주 었 다.서버 가 답장 한 데 이 터 를 처리 해 야 하 는 경우 가 많다.
네트워크 요청 은 자 연 스 럽 게 비동기 작업 입 니 다.Fetch 방법 은 Promise 를 되 돌려 줍 니 다.이 모델 은 비동기 스타일 의 코드 를 간소화 할 수 있 습 니 다.Promise 에 대해 서 는 참고 하 시기 바 랍 니 다.Promise
서버 가 되 돌아 온 데 이 터 를 처리 합 니 다.우 리 는 위의 두 번 째 와 세 번 째 POST 요청 에서 데이터 처 리 를 실 현 했 습 니 다.구체 적 인 코드 는 위의 실현 코드 를 참고 한다.
기본적으로 iOS 는 https 가 아 닌 모든 요청 을 막 습 니 다.요청 한 인터페이스 가 http 프로 토 콜 이 라면 먼저 App Transport Security 의 예 외 를 추가 해 야 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.