Fetch를 사용하여 React Native에서 네트워크 요청을 보내는 방법

이 글에서는 주로 Fetch를 사용하여 네트워크 요청을 보내는 React Native의 샘플 코드를 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

우리 프로젝트에서는 HTTP(HTTPS) 요청을 통해 네트워크에 액세스하는 경우가 많습니다. 일반적으로 "GET", "PUT", "POST" 및 "DELETE"로 구분됩니다. 지정하지 않으면 기본값은 GET 요청입니다.

프로젝트에서는 일반적으로 GET과 POST라는 두 가지 요청 방법을 사용합니다. 매개변수가 있는 양식을 통해 제출된 요청의 경우 일반적으로 POST 요청 방법을 사용합니다.

HTTP 요청을 하려면 React Native에서 제공하는 Fetch API를 사용해야 합니다. 어떤 주소에서든 콘텐츠를 가져오려면 간단히 URL을 fetch 메소드에 매개변수로 전달하면 됩니다. (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에서 영화 필드를 꺼냅니다. 동시에 네트워크 장애 또는 액세스 연결 오류 등의 Error가 발생하면 등은 .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 요청의 일부 매개변수를 사용자 정의하는 데 사용됩니다. 헤더 매개변수를 지정하거나 POST 메소드 사용을 지정하거나 데이터 제출 등을 할 수 있습니다. Fetch API는 헤더 사용자 정의, 메소드 변경, 본문 추가 등도 지원합니다. 위의 기본 POST 요청, 자체 헤더 추가: Accept 및 Content-Type, Body 추가

POST (2)

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 (3) 권장

위의 두 가지 방법을 통해 또한 POST 요청을 보내는 방법도 있으며, 물론 이 방법도 권장됩니다.

서버가 위의 POST 데이터 형식을 인식하지 못하는 경우 다음과 같은 전통적인 형식을 사용해 볼 수 있습니다.

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);
});

이 방법을 추천하는 또 다른 이점은 FormData에 바이트 스트림을 직접 전달하여 이미지 업로드 기능을 구현할 수 있다는 것입니다. 코드는 다음과 같습니다.

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')
})

서버의 응답 데이터 처리

위의 예는 많은 경우 요청을 시작하려면 서버에서 반환된 데이터도 처리해야 합니다.

네트워크 요청은 기본적으로 비동기 작업입니다. 이 모드는 비동기 스타일 코드를 단순화할 수 있습니다. to: Promise

서버에서 반환된 데이터를 처리합니다. 위의 두 번째 및 세 번째 POST 요청에서 데이터 처리를 구현했습니다. 구체적인 코드는 위의 구현 코드를 참조하세요.

기본적으로 iOS는 모든 비-요청을 차단합니다. https 요청입니다. 따라서 먼저 앱 전송 보안에 대한 예외를 추가해야 합니다.

앞으로 도움이 되길 바랍니다. knockoutjs

vue를 사용하여 원활한 스크롤 구성 요소를 구현하는 방법

JavaScript 배열 작업의 어려움(자세한 튜토리얼)

WeChat 미니 프로그램에서 like 기능을 구현하는 방법

위 내용은 Fetch를 사용하여 React Native에서 네트워크 요청을 보내는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!