자바스크립트 - 리퀘스트 보내기 (axios)

axios는 3rd party 모듈로, 설치가 필요함

fetch보다 좀더 간편하게 쓸 수 있음

 

fetch를 이용한 코드 (api.js)

export async function getColorSurveys(params = {}){
    const url = new URL(`https://learn.codeit.kr/api/color-surveys`);
    Object.keys(params).forEach((key) =>
    url.searchParams.append(key, params[key])
    );

    const res = await fetch(url);

    if (!res.ok) {
        throw new Error ('데이터를 불러오는데 실패했습니다.');
    }

    const data = await res.json();
    return data;
}

export async function getColorSurvey(id) {
    const res = await fetch(`https://learn.codeit.kr/api/color-surveys/${id}`);
    const data = await res.json();
    return data;
}

export async function createColorSurvey(surveyData) {
    const res = await fetch(`https://learn.codeit.kr/api/color-surveys`, {
    method: 'POST',
    body: JSON.stringify(surveyData),
    headers:{
        'Content-Type': 'application/json',
    },
    });

    const data = await res.json();
    return data;
}

 

GET 리퀘스트 보내기

// api.js의 함수들을 axios문법으로 바꿔보기
// 1. import 

import axios from 'axios';

export async function getColorSurveys(params = {}){
    const res = await axios.get(`https://learn.codeit.kr/api/color-surveys`, 
        { params }, 
    ); 
    return res.data;
}

export async function getColorSurvey(id) {
    const res = await axios.get(`https://learn.codeit.kr/api/color-surveys/${id}`);
    return res.data;//바디 내용을 파싱할 필요는 없음, .data 메소드 사용 , data 변수에 담지않고 바로 리턴
}

1. 설치하기 터미널에 커맨드 입력: npm install axios

2. import

3. fetch대신 axios.get() 메소드 사용

4. .json으로 파싱할 필요없음  res.data 사용

5. url 객체를 사용할 필요 없이 params 프로퍼티 사용해서 params 객체를 설정 (?)

    : 쿼리 파라미터를 담고있는 객체를 전달하면, 객체에 있는 프로퍼티 별로 알아서 쿼리 스트링을 만들고 url뒤에 붙여서 리퀘스트를 보내준다. (null, undefined값은 무시)

 

---

POST 리퀘스트 보내기

/POST 리퀘스트 보내기
export async function createColorSurvey(surveyData) {
    const res = await axios.post( //axios.${HTTP method랑 동일한 이름으로}
        `https://learn.codeit.kr/api/color-surveys`, 
        surveyData,
        );
        return res.data;
}

//POST 메소드는, 바디로 전달할 데이터를 두번쨰 아규먼트로 받는다 
// <- 자바스크립트의 객체를 그대로 사용할 수 있다.
// axios가 알아서 json 문자열로 변환해준다.
//첫번째 아규먼트 = url
// JSON.stringify 같은 메소드 필요없구
// 헤더도 바디 보고 알아서 설정해주므로 Content-Type로 설정해줄 필요없다

코드가 훨씬 간결하다 

---

원랜 이렇게 생겼었음.. 

export async function createColorSurvey(surveyData) {
    const res = await fetch(`https://learn.codeit.kr/api/color-surveys`, {
    method: 'POST',
    body: JSON.stringify(surveyData),
    headers:{
        'Content-Type': 'application/json',
    },
    });

    const data = await res.json();
    return data;
}

---

리퀘스트의 body가 필요없는 GET이나 DELETE

두번째 파라미터 : option

바디가 필요한 POST, PATCH, PUT

두번째 파라미터 : body

세번째 파라미터 : option

 

옵션에서는 헤더, 쿼리파라미터, 타임아웃 등 다양한 설정을 줄 수 있다.

 

https://axios-http.com/docs/req_config

Request Config | Axios Docs

 

여기까지가 기본문법..

---

instance 라는걸 만들수 있다 !

리퀘스트마다 공통된 부분을 인스턴스에서 설정할 수 있다. 

-> baseURL, 타임아웃 설정해보자~

 

const instance = axios.create({
    baseURL : 'https://learn.codeit.kr/api', 
    timeout: 3000,
});

맨 위에 선언해준다

axios.get -> instance.get으로 바꿔주고 

url주소도 베이스 이후의 경로만 적어준다.

// axios → instance 로 바꾸고 BaseURL 뒷부분만 남겨준다. 
export async function getColorSurveys(params = {}){
    const res = await instance.get(`/color-surveys`, { 
            params
    }, ); 
    return res.data;
}

export async function getColorSurvey(id) {
    const res = await instace.get(`/color-surveys/${id}`);
    return res.data;
}

//POST 리퀘스트 보내기
export async function createColorSurvey(surveyData) {
    const res = await instace.post( `/color-surveys`, surveyData);
        return res.data;
}

 

import 경로 수정하고 axios.js 로 테스트 해보기

---

오류 처리하기

 

fetch함수는 리퀘스트 자체가 실패했을때만 프로미스가 rejected가 되고

400, 500 에러 리스폰스를 받으면 프로미스가 rejected 되지 않았다.

 

axios는 400, 500 에러도 프로미스 rejected된다

---

axios 함수를 호출할때 try 함수로 감싸준다.

try{
    console.log('GET /color-surveys');
    const data = await getColorSurveys({ offset : 10, limit: 5});
    console.log(data);
}catch(e){
    console.log('오류가 발생했습니다.');
    console.log(e.message);
}

 

출력되는 에러 메시지는 axios가 알아서 설정해주는데, 

에러 리스폰스의 바디에 있는 메시지를 사용할 수도 있다.

에러 리스폰스가 돌아오면 axios는 에러 객체의 리스폰스 를 저장한다.

catch(e){
    console.log('오류가 발생했습니다.');
    console.log(e.response);
}

 

스테이터스, 헤더 헤더스, 바디데이터, 데이터 프로퍼티가 있다

 

e.response.status

e.response.data 등으로 접근 가능

 

주의! 리스폰스가 돌아왔을때만 리스폰스 객체가 존재한다.

따라서 status, data 확인하기 전에 먼저 존재 여부를 확인해야한다. if(e.response){ ~ } 

---

정리하자면

 

GET 리퀘스트

쿼리 파라미터를 보낼 경우 params 옵션을 사용

 

POST 리퀘스트

리퀘스트에 보낼 바디 내용은 두번째 아규먼트로 전달

= 자바스크립트 객체이므로 fetch를 사용할때는 json으로 변환해서 보내기 

 

리퀘스트에 바디가 필요 없는 get이나 delete는 옵션을 두 번째 아규먼트로 받고 

바디가 필요한 post, patch, put은 바디 데이터를 두 번째 아규먼트로 받고, 옵션을 세 번째 아규먼트로