[javascript] 비동기로 GET하기

async & await 란? 
  프로미스를 좀 더 쉽게 사용할 수 있게 만든 비동기 함수

      - promise 객체를 반환하는 함수를 다시 함수로 리패키징
      - 해당 패키징 함수에 async 키워드 작성
      - 해당 패키징 함수 안쪽 반환하는 promise 함수 앞에 await 지정
      - await로 지정된 함수가 끝날 때까지 그 다음 함수는 동기화

 

const result = document.querySelector('#result');
    const URL = 'https://jsonplaceholder.typicode.com/users';

    /*
    fetch(URL)
      .then(res => res.json())
      .then(users => console.log(users));

    async function data() {
      // 서버의 자료를 다 가져오면 결과값을 res에 저장
      const res = await fetch(URL);
      // res.json 실행이 끝나면 users에 저장
      const users = await res.json();
      console.log(users)
    }
    */

    async function data() {
      const res = await fetch(URL);
      const users = await res.json();

      usersList(users);
    }

    function usersList(users) {
      let output = '';
      users.forEach(user => {
        output += `${user.id} : ${user.username}
					email: ${user.email}
					phone: ${user.phone}
					address: ${user.address}
               	  `;
      });
      result.innerHTML = output;
    }

    data();

 
 

const result = document.querySelector('#result');

    const getBooks = async () => {
      const res = await fetch(
        "https://dapi.kakao.com/v3/search/book?query=동화", {
        "method": "GET",
        "headers": {
          "Host": "dapi.kakao.com",
          "Authorization": "KakaoAK 24351b63ff85b01997cab9dd498313cc"
        }
      }
      );
      const json = await res.json();
      console.log(json.documents);

      books(json.documents);
    }

    function books(items) {
      let output = '';
      items.forEach(item => {
        output += `${item.title}${item.authors}${item.status}
        ${item.price}
        `;
      });
      result.innerHTML = output;
    }

    getBooks();

 
 
REACT에서 useEffect이용해서 data불러오기

import axios, { Axios } from 'axios';
import React, { useEffect, useState } from 'react';

function Async1(props) {
  const [data, setData ] =useState([])
/*
  useEffect(()=>{ //외부데이터는 useEffect필수
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())   //fetch는 json변환 필요
    .then(json => setData(json))
  },[]);
*/

/* 기본 작성 방식 -> axios.get('url').then();
  useEffect(()=>{
    axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(res => setData(res.data)); //axios는 json을 array나 object로 자동 변환해줌
  },[])
*/

/*useEffect (()=>{
const getData = async() => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await res.json();
  setData(data);
}
getData(); //async await 사용하면 함수 호출 한번 필요
},[])
*/
useEffect(()=>{
//함수 정의 필요 
const getData = async() =>{
  const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
  setData(res.data); 
}
getData();
},[])

  return (
    <>
    { data.map(item=>
				{item.title.substr(0,10)}{item.body.substr(0,50)}
				) }
    );
	}

export default Async1;

 

import axios, { Axios } from 'axios';
import React, { useEffect, useState } from 'react';

function Async2() {
  const [data, setData ] =useState([]);
  const [error, setError] =useState("");
  const [loading, setLoading] = useState(true);

  useEffect(()=>{
    axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(res => { //응답 성공
      setData(res.data);
      setLoading(false);
      setError("");
    })
    .catch(error=>{ //응답 실패
      setData([]);
      // setLoading(true);
      setError('주소를 찾을 수 없습니다.')
    })

  },[])

  return (
  { data && loading ? 로딩중...기다리시라요 : { data.map(item=>
				{item.title.substr(0,10)}{item.body.substr(0,50)}
	) }
  }
  {error && error}
    );
}

export default Async2;

 
 

import axios, { Axios } from 'axios';
import React, { useEffect, useState } from 'react';

function Async3() {
  const [ data, setData ] =useState([]);
  const [loading, setLoading] =useState(false);
  const [error, setError] =useState(null);

  useEffect (()=>{
    const getData = async() => {
      try{ //성공 했을 때
        const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setData(res.data);
        setLoading(true);
        setError(null);
      } catch(err){ //실패 했을 때 
        setError(err);
      }
      setLoading(false);
    }
    getData(); 
  },[])


  if( loading ) {return <h3>로딩중...</h3> }
  if( error ) {return <h3 style={{color:'red'}}>Error 데이터를 불러올 수 없습니다.</h3> }
  if( !data ) {return null; }


  return (
    <ol>
      {
        data.map(item=> <li key={item.id}><h3>{item.title.substr(0,10)}</h3><p>{item.body}</p></li>)
      }
    </ol>
  );
}

export default Async3;

 

import axios from 'axios';
import React, { useEffect, useState } from 'react';

function Async4(props) {
const [data, setData] =useState([]);

useEffect(()=>{
const url =`https://newsapi.org/v2/top-headlines?country=kr&category=sports&apiKey=406adf47934349649db914d82dc1eba8`;
axios.get(url).then(res => setData(res.data.articles))
// .catch(err=>{})
},[])

  return (
    <>
      {
        data.map((item , idx)=> <li key={idx}><a href={item.url} target="_blank">
          <img src={item.urlToImage} alt={item.title} style={{width:'30vw'}}  />
          <h3>{item.title}</h3>
          <p>{item.description}</p>
          </a></li>)
      }
    </>
  );
}

export default Async4;

 

import React, { useEffect, useState } from 'react';

function UseEffect5(props) {
  const [txt, setTxt] =useState(5);
  const [count, setCount] =useState(1);
  function changeInput (e){
    const {value} = e.target;
    setTxt(+value); //input의 반환 값은 문자열이어서 뒤에 값추가되는 형태로 더하기중 > 글씨 앞에 +붙여서 숫자로 변환
  }

  useEffect(()=>{
console.log('실행');
const timer = setInterval(()=>{
  setCount( con => con + txt ); //기존값 con에 입력한 값txt만큼 증가 
},2000);
return ()=>{clearInterval(timer);}
  },[txt]); //변하는 기준이 txt, 입력하지 않으면 한번만 실행됨

  return (
    <div>
      <h1>입력한 값만큼 1초마다 증가</h1>
      <p>숫자 간격 : <input type="text" value={txt} onChange={changeInput} /></p>
      <h2>{count}</h2>
    </div>
  );
}

export default UseEffect5;

 
 
youtube data 불러오기 

import axios from 'axios';
import React, { useEffect } from 'react';

function Youtube(props) {
  const key= ``; //내 API key 
  const playList= ``; //내 플레이리스트URL뒷자리
  const num= `3`; //영상수
  const URL = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&key=${key}&playlistId=${playList}&maxResults=${num}`; //작성양식 

    useEffect(()=>{
    axios.get(URL).then(json => console.log(json.data.items))
    },[]);


  return (
    <>
      <h1>유튜브1</h1>
      
    </>
  );
}

export default Youtube;