Fetch API

fecth란, 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다. (기본적으로 Request, Response가 내장 되어 있음.)

fecth는 promise객체를 반환(비동기 처리의 결과물!)

 

기본 문법!

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

 

        const [data, setData] = React.useState(null);
        const [error, setError] = React.useState(null);

        React.useEffect(() => {
          fetch(
            "https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json"
          )
            .then(function (response) {
              return response.json();
            })
            .then(function (myJson) {
              setData(myJson.data);
            })
            .catch((error) => {
              //error catch
              setError(error);
            });
        }, []);

fetchを使うには、必ず取得するリソースを指定しないといけない。

リソースを指定し、リターンはpromiseオブジェクトが返ってくる(response)。

返ってきたresponseを２番目のthenで初期化をする。

エラーがの場合は、catchにて処理をする。

 

初期化したデータは以下のように扱うことができる。

        return (
          <div>
            <p>People</p>
            {data.people.map((person) => (
              <div>
                <span>{person.age}</span>
                <span>{person.name}</span>
              </div>
            ))}
          </div>
        );