React 학습: Fetch 및 Axios를 사용한 API

Mean Girls의 Gretchen과 달리 React는 실제로 fetch 발생합니다.

기능 구성 요소를 사용하든 클래스 구성 요소를 사용하든 앱이 충분히 크면 API에서 데이터를 가져와야 할 것입니다.

지금 막 배우고 있고 연습할 API가 필요한 경우 제가 좋아하는 두 가지 무료 제안이 있습니다.

Trivia API 여기에는 많은 매개변수 옵션이 있지만 반환된 많은 데이터는 표시하기 전에 문자 엔터티를 정리해야 합니다(예: &).
Pokemon API에는 포켓몬 이름, 능력, 유형 및 사진에 대해 만들 수 있는 몇 가지 다른 쿼리가 있습니다.

술책()

fetch() 호출은 두 개의 인수를 사용합니다. fetch("https://pokeapi.co/api/v2/pokemon/1") 와 같은 api url 매개변수는 하나입니다. 다른 하나는 헤더, 본문, 자격 증명 및 기타 정보를 포함할 수 있는 초기화 개체입니다.

기본 fetch() 호출은 다음과 같습니다.

fetch('https://pokeapi.co/api/v2/pokemon/1')
  .then(response => response.json())
  .then((results) => {console.log(results)});

클래스 구성 요소를 사용하는 경우 'componentDidMount' 수명 주기 메서드에 api fetch() 호출을 넣어야 하고 기능 구성 요소를 사용하는 경우 useEffect 후크도 호출되는지 확인해야 합니다. 빈 배열을 추가하여 렌더링합니다.

Fetch.AI는 요청의 성공 여부에 관계없이 API에 대한 요청의 응답을 가리키는 약속을 반환합니다. 이 응답은 JSON이 아닌 HTTP 응답입니다. 응답의 JSON 본문 내용을 가져오려면 응답에서 json() 메서드를 사용해야 합니다.

     fetch(powersUrl).then(response => response.json()).then(
         (result) => {
             this.setState({
                 powerInfo: result
             });
         },
         (error) => {
             this.setState({
                error
             });
          }
     )

오류에 대해 .catch() 블록을 사용하는 대신 fetch()와 함께 (error)를 사용하여 구성 요소에 있을 수 있는 실제 버그의 예외를 삼키지 않도록 합니다.

Fetch.AI를 사용한 요청은 네트워크 오류가 있거나 요청 완료를 방해하는 요소가 있는 경우에만 거부됩니다. 4xx 또는 5xx 유형 코드인 경우 ok 상태를 업데이트합니다.

변수 쿼리 매개변수를 추가하려면 URL에 직접 인코딩할 수 있습니다.

fetch(`https://pokeapi.co/api/v2/pokemon?limit=${encodeURIComponent(data.limt)}`)
.then(res => res.json())
.then( ....

이 fetch() 함수를 사용하면 GET , POST , PUT 및 DELETE 와 같은 표준 HTTP 동사로 HTTP 요청을 할 수 있습니다. 메소드, 헤더 및 본문과 같은 다른 필요한 데이터를 fetch()에 추가할 수 있습니다.

 fetch(userURL , {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    })
      .then((resp) => resp.json())
     .then(  ......

액시오스()

Axios는 API 호출을 처리하는 데 사용할 수 있는 또 다른tool입니다. 브라우저와 node.js를 위한 가벼운 약속 기반 HTTP 클라이언트입니다.

import axios from 'axios'

npm으로 설치하고 package.json에 추가해야 합니다. 그런 다음 파일 맨 위에 가져와야 합니다. Axios는 두 가지 입력을 받습니다. 적중하려는 끝점의 URL과 보내려는 모든 속성이 포함된 개체입니다.

    axios.get(monsterUrl).then(
        res => {
            var monsterChart = []
            monsterChart.push(<div> {{res.pokemon}}</div>)
            updateMonster(monsterChart)
            }
        ).catch(
            .... )
    }

다음과 같이 형식을 지정할 수도 있습니다.

axios({
      method: 'post',
      url: 'https:/coolAPI.com/api/cool',
      data: {
            email: '[email protected]',
            password: test1234
      }
})

파고들어야 할 것이 더 많이 있지만 이것들은 연습해야 할 두 가지 확실한 부분입니다!