전체 웹페이지를 한 번 검색하는 대신 ajax를 사용하면 서버에서 개별 데이터 항목을 검색하여 전체 새 페이지를 로드하지 않고도 웹페이지의 섹션을 업데이트할 수 있습니다.
이로 인해 웹 페이지가 XMLHttpRequest 또는 오늘날 Fetch API와 같은 API를 사용하여 작은 데이터 청크를 요청할 수 있는 기술이 만들어졌습니다.

가져오기는 데이터를 즉시 검색하지 않습니다. 요청이 서버에 도달하고 요청된 데이터로 응답하는 데 시간이 걸립니다. 따라서 요청에 대한 응답을 얻은 후에만 코드를 실행하려는 것을 나타내는 메커니즘이 존재합니다.

기본 가져오기 요청

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

쿼리할 URL을 계산한 다음 가져오기로 전환합니다

.

데이터 응답(비동기)을 기다린 다음 json으로 해결합니다

.

그런 다음 데이터를 가져와 얻은 데이터로 작업을 수행합니다.

const fetchGitHubProfileJSON = () => {
  const username = 'AnneQuinkenstein';
  const url = `https://api.github.com/users/${username}`;
  fetch(url)
    .then((res)=> res.json())
    .then((profile) => {
    const profileHtml = `
        <p><strong>${profile.name}</strong></p>
        <img src="${profile.avatar_url}" />
      `;
      document.querySelector('#github-profile').innerHTML = profileHtml;
    });

fetchGitHubProfileJSON();

cheatsheet for fetch

악시오스

가져오기와 비교한 장점: JavaScript 객체를 JSON으로 또는 그 반대로 자동 변환 및 더 나은 오류 관리 메커니즘$ yarn add axios axios

 const fetchPokemonJSON =()=> {
  const pokemonId = 1;
  const url = `https://pokeapi.co/api/v2/pokemon/${pokemonId}`;
  axios.get(url)
    .then(res => res.data)
    .then(pokemon => {
      console.log('data decoded from JSON:', pokemon);
      const pokemonHtml = `
        <p><strong>${pokemon.name}</strong></p>
        <img src="${pokemon.sprites.front_shiny}" />
      `;
      document.querySelector('#pokemon').innerHTML = pokemonHtml;
    });
}

fetchPokemonJSON();

GitHub first Example

리액트가 있는 API

API에서 데이터를 가져와 앱의 상태에 저장합니다.
"상위"구성 요소는 API를 호출하고 수신된 정보를 "하위"구성 요소에 전달합니다.
axios with React