Axios - 가져오기 및 게시

자바스크립트를 배우는 동안 데이터를 가져오고, 데이터를 게시하고, 데이터를 업데이트하고, 데이터 조각을 삭제하는 방법으로 Fetch를 배웠습니다. 가져오기가 훌륭합니다! 사용하기 너무 어렵지 않고 이제 자바스크립트에 내장되어 있습니다. 내 데이터를 가져오고, 게시하고, 업데이트하고, 삭제할 수 있는 더 좋은 방법이 있는지 생각하기 시작했습니다. 우리의 삶을 더 쉽게 만들기 위해 새로운 라이브러리를 만드는 지능적인 프로그래머가 항상 있습니다. 그때 Axios를 찾았습니다.

이 블로그 게시물에서 배울 내용

Axios가 무엇인지, 프로젝트에 설치하는 방법, 이를 사용하여 GET 및 Post 요청을 수행하는 방법을 배우게 됩니다. 이 블로그 게시물의 목표는 콘솔에 데이터를 기록하는 것입니다.

액시오스가 무엇인가요?

Axios는 가져오기와 유사합니다. 일부 데이터가 필요한 새 자바스크립트 프로젝트를 만들 때 둘 중 하나를 사용할 수 있습니다. Axios의 한 가지 단점은 기본적으로 javascript에 내장되어 있지 않기 때문에 필요한 스크립트 태그를 HTML 파일에 추가해야 한다는 것입니다. 가져오기의 한 가지 단점은 게시 요청을 보낼 때 응답 본문을 문자열화해야 한다는 것입니다. Axio의 데이터에는 이미 개체가 포함되어 있습니다.

일부 Axios 기능은 무엇입니까?

브라우저에서 XMLHttpRequests 만들기

Promise API 지원

변환 요청 및 응답 데이터

JSON 데이터에 대한 자동 변환

XSRF(Cross-site request forgery)로부터 보호하기 위한 클라이언트 측 지원
추가 결제를 위해From Axios Docs on Github

다음 프로젝트를 위해 Axios를 설정하는 방법은 무엇입니까?

Axios를 설치하는 4가지 방법

npm 사용:

$ npm install axios

정자 사용:

$ bower install axios

원사 사용:

$ yarn add axios

cdn 사용:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios로 GET 요청을 수행하는 방법

이 예에서는 jsonplaceholder API에 GET 요청을 보냅니다. 우리는 .then 구문을 사용하여 약속을 처리할 것입니다. 원하는 경우 asnyc/await 구문을 자유롭게 사용하십시오.

HTML 파일에 스크립트 태그를 포함해야 하는 마지막 방법을 사용하겠습니다.


app.js 파일에서 버튼이나 이벤트 리스너를 추가하지 않을 것입니다.

const getPosts = () => {
  axios
    .get("https://jsonplaceholder.typicode.com/posts")
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.error(error)
    });
};
getPosts();

성공!


화살표 함수 getPosts를 만들었습니다. 함수 내에서 가져오기에서와 유사한 사용자 축을 사용합니다. 그러나 액시오스는 어디에서 왔는가? app.js 파일 어디에도 선언하거나 초기화하지 않았습니다. 이전에 포함시킨 스크립트 태그를 통해 axios를 사용할 수 있었습니다. .get은 지정된 URL로 get 요청을 보냅니다. 이것은 우리에게 .then을 사용하여 처리하는 이유인 약속을 반환합니다. 아주 간단합니다!

Axios로 POST 요청을 수행하는 방법

게시 요청은 가져오기 요청과 매우 유사합니다.

const postPosts = () => {
  axios
    .post("https://jsonplaceholder.typicode.com/posts", {
      title: "Fred",
      body: "Fred is awesome"
    })
    .then(response => {
      console.log(response);
    })
    .catch(error => {
      console.error(error);
    });
};
postPosts();

구문은 매우 친숙해 보이지만 몇 가지 변경 및 추가 사항이 있습니다. 여기서는 함수 표현식 이름을 postPosts로 변경합니다. 대신 서버에 게시 요청을 보내기 때문에 .post를 사용하기 전에 .get을 사용합니다. 게시 요청 외에도 우리는 axios에게 무엇을 보낼지 알려줘야 합니다. 다음은 서버로 보낼 매개변수입니다.

{
 title: "Fred",
 body: "Fred is awesome"
}

우리는 이 정보를 서버에 추가하도록 서버에 지시하고 있습니다. jsonplaceholder를 사용하고 있기 때문에 실제 서버에 게시하지는 않지만 id가 100에서 101로 이동하는 것을 볼 수 있습니다. id: 101이 표시되면 서버에 성공적으로 게시한 것입니다.

어느 것을 사용해야 합니까?

때에 따라 다르지. 한편으로 Fetch는 사용자를 위해 자바스크립트에 내장되어 있으며 아마 절대 사라지지 않을 것입니다. Axios는 다른 사람이 만든 라이브러리이므로 언제든지 업데이트를 중단하거나 교체할 수 있습니다. Axios는 우리를 위해 많은 일을 해주므로 우리는 그것에 대해 생각할 필요가 없고 데이터 사용에 집중할 수 있습니다. 이는 자바스크립트 파일에 있는 코드 줄 수를 줄여 버그 발생 가능성을 줄입니다.

읽어 주셔서 감사합니다! 잘못된 내용을 발견했거나 블로그 게시물과 관련된 내용에 대해 의견을 표명하고 싶은 경우 그렇게 하십시오.