Axios 사용법 (post,get,put,delete)

POST

Axios의 POST 사용법을 익혀봅니다.

문제의 지시사항을 참고하여 POST로 전달할 데이터 객체를 선언합니다.

const login = { email: "eve.holt@reqres.in", password: "cityslicka" };

axios.post를 이용해 선언한 객체와 URL을 전달합니다. 그리고 전달한 객체에 대해서 결과를 받아옵니다.
현재 사용하는 API는 email과 password를 전달해 token 값을 받는 API 입니다.
아래와 같이 호출하여 화면에 출력합니다.

  axios.post("https://reqres.in/api/login", login).then((response) => {
    let res = response.data.token;
    token.innerHTML = res;
  });

답안 코드

function axiosPost() {
  const token = document.getElementById("token");

  // 삽입할 데이터 객체를 선언하세요.
  const login = { email: "eve.holt@reqres.in", password: "cityslicka" };

  // axios.post를 호출하고 반환되는 토큰 값을 token의 innerHTML에 저장하세요.
  axios.post("https://reqres.in/api/login", login).then((response) => {
    let res = response.data.token;
    token.innerHTML = res;
  });
}

export default axiosPost;

 

GET

Axios의 GET 사용법을 익혀봅니다.

axios.get을 이용해 주어진 URL에 API를 호출합니다.
POST와 마찬가지로 then을 이용해 데이터를 받아오며, 받아온 데이터의 이름과 이메일을 화면에 출력합니다.

  axios.get('https://reqres.in/api/users/2')
    .then((response) => {
      let res = response.data.data;
      name.innerHTML = res.first_name + " " + res.last_name;
      email.innerHTML = res.email;
    }); 

이름은 성과 이름이 구분되어 있으므로 조합해서 출력합니다.

답안 코드

function axiosGet() {
  const name = document.getElementById("name");
  const email = document.getElementById("email");

  // axios.get을 호출하고 반환되는 데이터를 확인하세요.
  // 확인한 데이터에서 이름과 이메일을 출력 결과와 같이 출력하세요.
  axios.get("https://reqres.in/api/users/2").then((response) => {
    let res = response.data.data;
    name.innerHTML = res.first_name + " " + res.last_name;
    email.innerHTML = res.email;
  });
}

export default axiosGet;

 

PUT

Axios의 PUT 사용법을 익혀봅니다.

먼저 지시사항을 참고해 수정할 데이터 객체를 선언합니다.

  const updateData = {
    first_name: "White",
    last_name: "Rabbit",
    email: "alice@elice.io",
  };

axios.put을 이용해 API를 호출합니다.
이름과 이메일 및 수정된 시간을 함께 호출해봅니다.

  axios.put("https://reqres.in/api/users/2", updateData).then((response) => {
    let res = response.data;
    name.innerHTML = res.first_name + " " + res.last_name;
    email.innerHTML = res.email;
    updateDate.innerHTML = res.updatedAt;
  });

실행을 통해 수정된 데이터가 불러와진 것을 확인할 수 있습니다.

답안 코드

function axiosPut() {
  const name = document.getElementById("name");
  const email = document.getElementById("email");
  const updateDate = document.getElementById("update_date");

  // 수정할 데이터를 선언하세요.
  const updateData = {
    first_name: "White",
    last_name: "Rabbit",
    email: "alice@elice.io",
  };

  //  axios.put을 호출하고 result에 반환되는 사용자 데이터를 저장하세요.
  axios.put("https://reqres.in/api/users/2", updateData).then((response) => {
    let res = response.data;
    name.innerHTML = res.first_name + " " + res.last_name;
    email.innerHTML = res.email;
    updateDate.innerHTML = res.updatedAt;
  });
}

export default axiosPut;

DELETE

Axios의 DELETE 사용법을 익혀봅니다.

axios.delete를 이용해 데이터를 삭제할 수 있습니다.
삭제 결과 반환되는 status를 통해 처리 결과를 확인해봅니다.

  axios.delete("https://reqres.in/api/users/2").then((response) => {
    console.log(response);
    status.innerHTML = response.status;
  });

답안 코드

function axiosDelete() {
  const status = document.getElementById("status");

  // axios.delete를 호출하고 반환되는 status를 확인하세요.
  axios.delete("https://reqres.in/api/users/2").then((response) => {
    console.log(response);
    status.innerHTML = response.status;
  });
}

export default axiosDelete;