TIL _ React fetch

해달·2021년 8월 3일

TIL

목록 보기

24/80

Today 공부

Promise all (복습)
fetch , json()
Ajex 요청

Promise all (복습)

구문 Promise.all( ) [1,2,3]

Promise.all은 여러 프로미스의 결과를 집계할 때 유용하게 사용할 수 있습니다.

Promise를 반환한다
.then 으로 값을 받아와야 함

fetch API / fetch(), .json() - 메서드

코어자바스크립트

fetch()기본문법

let promise = fetch(url, [options])

url - 접근하고자 하는 url

options – 선택 매개변수, method나 header 등을 지정할 수 있음

fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환됩니다

response.json() – 응답을 JSON 형태로 파싱합니다,

MDN예제

  fetch('http://example.com/movies.json')
  .then(function(response) { // Response개체 반환
    return response.json(); // .json() 메서드 사용
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

Ajex 요청

fetch API를 써서 서버에 요청
endpoint : http://서버주소/proverbs

  useEffect(() => {
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
    });
}, [filter]);

모든 네트워크 요청이 항상 즉각적인 응답을 가져다주는 것은 아니니,

외부 API 접속이 느릴 경우를 고려하여, 로딩화면 구현은 필수 로 해야한다.

로딩화면 구현도 상태처리가 필요하므로,
fetch 요청의 전후로 setIsLoading을 설정해주어 보다 나은 UX를 구현할 수 있습니다.

useEffect(() => {
  setIsLoading(true);
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
      setIsLoading(false);
    });
}, [filter]);