[REACT] React - axios의 사용

1. React에서의 axios.get() 사용

- axios.get('https://jsonplaceholder.typicode.com/posts/1')

- button 클릭시 안에 있는 경로의 데이터 값을 달라고 요청

// App.js
// React 에서의 axios.get() 사용 예제
import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {

  render() {
    const f1 = () => {
      axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then((res) => {
        let { data } = res;
        let { userId, id, title } = data;
        
        console.log('UserId : ' + userId);
        console.log('Id : ' +id);
        console.log('Title : ' +title);
      })
      .catch((err) => {
        console.log(err);
        
      });
    }

    async function f2(){
      const res = await axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .catch((err) => {
        console.log(err);
      });

      console.log(res);
    }

    const f3 = async () => {
      const res1 = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
      const res2 = await axios.get('https://jsonplaceholder.typicode.com/posts/2');

      console.log(res1.data);
      console.log(res2.data);
    }

    return (
      <div>
        <button onClick={f1}>click1!</button>
        <button onClick={f2}>click2!</button>
        <button onClick={f3}>click3!</button>
      </div>
    );
  }
}

export default App;

click1 실행결과

click2 실행결과

click3 실행결과

 

- 아래사이트 참고해서 같이 보기

- 현재 직접 적인 연관은 없지만 다음 포스팅에서 js로 서버를 구축하고 react로 데이터를 요청하고 전달할 것임

https://hwan1001.tistory.com/49

[JAVA SCRIPT] JS - Koa 서버 사용(라우팅)

 

 

2019.08.20(화)

JS - Koa 서버 사용(라우팅)