axios로 API 호출해서 Data받아오기

<불러오기>버튼을 누르면 axios에서 data를 받아서 <textarea>에 넣어 보여주는 코드를 작성했다.

 

 

axios를 사용해 data받아오기

• get 사용 axios로 해당 url에 get을 사용하여 user 정보를 요청.
• then 사용 request에 대한 response가 도착했으면 어떤 행동을 취하도록 한다.
  (위의 코드에서는 response가 잘 도착했으면 console창에 응답으로 온 데이터를 보여줌)

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

const App = () => {

  const onClick = async()=> {
    try{
      await axios.get('https://jsonplaceholder.typicode.com/todos/1')
        .then(response=>{
          console.log(response.data)
        })     
    }catch(e){
      console.log(e)
      alert('Error데이터를 불러올 수 없습니다')
    }
  }

 

 

useState를 사용해 받아온 데이터 저장, 출력

axios로 받아온 데이터를 State에 저장

성공적으로 받아온 데이터는 .then에 넣어서 console.log출력 / setData()함수를 사용해 data로 저장

.then(response=>{
  console.log(response.data)
  setData(response)

response로 받은 데이터 출력

textarea로 내용 출력

  return (
    <div className='AppBox'>
      <button onClick={onClick}>불러오기</button>
      {data && <textarea rows={10} value={JSON.stringify(data)} readOnly={true}/>}
    </div>
  )

 

 

 코드 

const App = () => {

  const [data, setData] = useState(null)
  const onClick = async()=> {
    try{
      await axios.get('https://jsonplaceholder.typicode.com/todos/1')
        .then(response=>{
          console.log(response.data)
          setData(response)
        })     
    }catch(e){
      console.log(e)
      alert('Error데이터를 불러올 수 없습니다')
    }
  }

  return (
    <div className='AppBox'>
      <button onClick={onClick}>불러오기</button>
      {data && <textarea value={JSON.stringify(data)} readOnly={true}/>}
    </div>
  )
}

 

 

• 버튼을 클릭하면 axios로 get요청을 한 데이터를 화면에 보여줄 것이다.
• 데이터가 잘 들어왔으면 try문 안에 있는 코드가 실행되어
  console.log에 데이터가 출력되고, setData함수로 data내용이 업데이트 될 것이다.
• 데이터가 들어오지 않았다면 에러 처리를 위해 작성한 catch문의 코드가 실행될 것이다.

 

 

간단한 테스트인데도 알아야 할 것들이 많다! 

 

 

NOTE

1_ async - await 비동기 작업 [개발공부_Blog/React] - async - await 비동기 작업

2_ try catch 에러 핸들링 [개발공부_Blog/React] - try catch 에러핸들링

3_ textarea 간단에러 [개발공부_Blog/HTML] - textarea에 value속성을 사용한다면

4_ JSON.stringify 간단정리 [개발공부_Blog/JavaScript] - JSON.stringify() - 객체, 값을 JSON문자열 형태로

 

테스트 할 수 있는 API

https://jsonplaceholder.typicode.com/