node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 쉽게 말해 서버와의 연결/통신을 도와주는 라이브러리

API

프로그램과 데이버테이스 , 기능의 통신 방법을 도와주는 매개체. 데이버테이스 자체는 아니지만 요청에 따라 데이터, 서비스, 기능을 제공하는 메신저

특징

• 비동기처리

  • 요청과 응답의 순서가 보장되지 않음
  • 한번에 여러가지 요청과 응답 가능

• promise 기반(ES6 Promise Api)

  • 동기, 비동기의 처리를 도와주는 객체
  • 데이터를 모두 받아오기 전에 웹에 출력하려는 오류 해결
  • A,B,C 로직 있으면 A로직 완료 전까지 기다리지 않고 B,C 대기시키지 않고 시행
  • 총 3가지 상태 존재

  <aside> 🍔 Pending(대기) / Fulfilled(이행)/ Rejected(실패)

  처음 생성되면 pending 상태이고, then 혹은 try-catch문으로 통신 성공/실패 시 수행을 나눈다.

  then 함수는 이행되거나 실패할 때 시행될 콜백함수 취함 이행과 각각 프로미스의 결과와 오류를 then함수의 첫번째 인자로 넘긴다

  혹은 async와 await 사용 async는 함수 선언 시 사용하여 함수가 promise를 수행한다는 것을 명시 await는 함수의 결과 반환까지 기다림을 동작(실행을 지연)

  이로써 비동기성 문제를 해결하여 동기로 작동(이게 맞나…?) 이러한 구조로 await는 async로 선언된 함수 내부에만 존재할 수 있다

  </aside>

  • then은 일종의 콜백 함수로 또다른 promise를 부르게 되고 때문에 프로그램이 길고 복잡해짐. 따라서 async,await 사용을 권장한다

• 응답을 JSON형태로 변형

{//Axios 공식 문서
  // `data`는 서버가 제공한 응답(데이터)입니다.
  data: {},

  // `status`는 서버 응답의 HTTP 상태 코드입니다.
  status: 200,

  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지입니다.
  statusText: 'OK',

  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공됩니다.
  headers: {},

  // `config`는 요청에 대해 `axios`에 설정된 구성(config)입니다.
  config: {},

  // `request`는 응답을 생성한 요청입니다.
  // 브라우저: XMLHttpRequest 인스턴스
  // Node.js: ClientRequest 인스턴스(리디렉션)
  request: {}
}

실패시
{
  data: {},
  status:   ,
  statusText: ' '
}

• HTTP Method 사용 Get(조회), Post(등록), Put(수정), Delete(삭제)로 CRUD와 유사

async function getData(){
        try{
            const response = await axios.get('<https://jsonplaceholder.typicode.com/users>');
            console.log(response.data);
        }catch(e){
            console.log(e);
        }
    }

const postData=async () => {
        try{
            axios.post('<https://jsonplaceholder.typicode.com/users>', {
                username:"go",
                age:20
            })
        }catch(e){
            console.log(e);
        }
    }

값 불러와서 표시

https://react.vlpt.us/integrate-api/01-basic.html

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

    useEffect(()=>{
        async function getData(){
            try{
                const response = await axios.get('<https://jsonplaceholder.typicode.com/users>');
                setData(response.data)
                console.log(data);
                
            }catch(e){
                console.log(e);
            }
        }        

        getData();
    },[]);
       
    return(       
        <div>
            <h1>AXIOS</h1>

            <ul>
                {data.map(user =>(

                    <li key={user.id}
                    >{user.name}
                    </li>

                ))}
                
            </ul>
        </div>
    )
}