Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

axios GET 및 POST 요청을 만드는 방법

웹 애플리케이션을 빌드할 때 외부 리소스에 액세스하기 위해 HTTP 요청을 수행하려는 경우가 있습니다. 예를 들어 블로그를 만들고 있다고 가정합니다. API를 호출하여 각 블로그 게시물에 표시할 댓글 목록을 검색할 수 있습니다.

Axios는 웹 요청을 만드는 데 사용할 수 있는 인기 있는 JavaScript 라이브러리입니다. 이 가이드에서는 axios를 사용하여 GET 요청을 만드는 방법을 설명합니다. 몇 가지 예를 통해 axios가 작동하는 방식과 코드에서 사용하는 방법을 보여드리겠습니다.

Axios가 필요한 이유

Axios는 웹 요청을 쉽게 만들 수 있는 약속 기반 라이브러리입니다.

왜 다른 많은 웹 요청 라이브러리보다 axios를 사용해야 합니까? GET 요청을 만드는 데 사용할 수 있는 fetch와 같은 다른 라이브러리가 있는 것은 사실이지만 axios에는 이러한 라이브러리에 없는 많은 이점이 있습니다.

Axios는 이전 브라우저를 지원하므로 보다 접근 가능한 사용자 환경을 만들 수 있습니다. Axios에는 취약성을 방지하기 위해 CSRF 보호 기능이 내장되어 있습니다. Node.js에서도 작동하므로 프론트엔드 또는 백엔드 웹 애플리케이션을 모두 개발할 때 유용합니다.

Axios 설치 방법

axios를 사용하여 GET 요청을 하기 전에 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 수행할 수 있습니다.

npm install axios --save

이 명령은 axios를 설치하고 로컬 package.json 파일에 저장합니다. 이제 axios 라이브러리를 사용할 준비가 되었습니다.

Axios를 사용하여 요청하는 방법

axios를 시작하는 것은 간단합니다. 웹 요청을 하려면 데이터를 요청하려는 URL과 사용하려는 방법을 지정하기만 하면 됩니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

cat-facts API에서 고양이에 대한 임의의 사실 목록을 검색한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

axios ({
	url: "https://cat-fact.herokuapp.com/facts",
	method: "GET"
)}

이 코드는 아직 완료되지 않은 요청을 나타내는 약속을 반환합니다. 이 HTTP 요청에서 데이터를 검색하려면 다음과 같이 async/await 함수를 사용합니다.

const axios = require("axios");

async function getCatFacts() {
	const response = await axios ({
	url: "https://cat-fact.herokuapp.com/facts",
	method: "GET"
})

console.log(response.data)
}

getCatFacts()

서버는 고양이 사실 목록으로 응답했습니다.

이 함수를 호출하면 cat-facts API에 HTTP GET 요청이 생성됩니다. 웹 요청이 완료될 때까지 프로그램이 계속되지 않도록 async/await 기능을 사용합니다. axios가 먼저 약속을 반환하기 때문입니다. 요청이 완료된 후 요청에서 데이터를 반환합니다.

axios 라이브러리에는 웹 요청을 만드는 데 사용할 수 있는 몇 가지 축약형 명령이 있습니다.

  • axios.get()
  • axios.post()
  • axios.delete()
  • axios.put()
  • axios.patch()
  • axios.options()

이 튜토리얼에서는 axios.get()에 초점을 맞출 것입니다. 및 axios.post() 다른 모든 축약 방법과 동일한 기본 구문을 사용하는 방법입니다.

axios를 사용하여 GET 요청하기

마지막 예에서는 axios를 사용하여 GET 요청을 했습니다. 그러나 axios로 GET 요청을 하는 더 간단한 방법이 있습니다:axios.get() 사용 .

고양이 정보 목록을 검색한 다음 반환된 항목 수를 계산한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

const axios = require("axios");

async function getCatFacts() {
	const response = await axios.get("https://cat-fact.herokuapp.com/facts")

console.log(`{response.data.all.length} cat facts were returned.`)
}

getCatFacts()

코드는 다음 응답을 생성했습니다. 225개의 고양이 정보가 반환되었습니다.

코드를 분해해 보겠습니다. 먼저 getCatFacts()라는 비동기 함수를 선언했습니다. 여기서 우리는 웹 요청을 합니다.

그런 다음 axios.get()을 사용합니다. cat-facts API에서 고양이 정보 목록을 검색합니다. "response.data"는 요청의 응답 객체와 요청 본문을 보유합니다.

마지막으로 .length 속성을 사용하여 요청에서 반환된 고양이 정보 수를 계산합니다. 그런 다음 이 숫자를 "고양이 사실이 반환되었습니다"라는 문자열에 추가합니다.

axios를 사용하여 헤더 보내기

GET 요청을 할 때 요청하는 웹 리소스에 사용자 지정 헤더를 보내야 할 수도 있습니다. 인증이 필요한 API에서 데이터를 검색한다고 가정합니다. 인증 헤더를 지정해야 할 수도 있습니다.

axios 요청으로 헤더를 지정하려면 다음 코드를 사용할 수 있습니다.

axios.get("https://urlhere.com", {
	headers: { "header-name": "header-value" }
})

이 코드는 값이 "header-name"인 "header-name"을 우리가 지정한 URL로 보냅니다.

axios를 사용하여 매개변수 보내기

많은 API를 사용하면 GET 요청에서 매개변수를 보낼 수 있습니다. 예를 들어 API를 사용하면 limit 매개변수를 사용하여 반환되는 응답 수를 제한할 수 있습니다.

axios를 사용하면 웹 요청과 함께 보낼 매개변수를 쉽게 지정할 수 있습니다. 매개변수를 쿼리 문자열로 포함하거나 params 속성을 사용할 수 있습니다. 다음은 쿼리 문자열을 사용하여 매개변수를 지정하는 웹 요청을 만드는 axios의 예입니다.

axios;get("https://urlhere.com/?date=2020-05-15")

또는 다음 코드를 사용하여 axios 옵션에서 params 속성을 지정할 수 있습니다.

axios;get("https://urlhere.com/?date=2020-05-15", {
params: {
date: "2020-05-15"
}
})

이 두 예는 모두 이름이 "date"이고 값이 "2020-05-15"인 매개변수를 지정된 URL로 보냅니다.

axios를 사용하여 POST 요청을 만드는 방법

POST 요청을 만드는 구문은 GET 요청을 만드는 것과 동일합니다. 차이점은 axios.post()를 사용해야 한다는 것입니다. axios.get() 대신 메소드 .

API에 게시 요청을 하려고 한다고 가정합니다. 다음 코드를 사용하여 수행할 수 있습니다.

axios.post("https://urlhere.com")

GET 요청을 할 때와 같은 방식으로 헤더와 매개변수를 지정할 수 있습니다. POST 요청과 함께 값이 "James"인 "Name" 헤더를 보내려고 한다고 가정해 보겠습니다. 다음 코드를 사용하여 그렇게 할 수 있습니다. 

axios.post("https://urlhere.com", {
	headers: { "Name": "James" }
})

결론

axios 라이브러리는 JavaScript에서 웹 요청을 만드는 데 사용됩니다. JavaScript를 사용하는 프런트 엔드 또는 Node.js와 같은 플랫폼을 사용하는 백엔드 모두에서 사용할 수 있습니다. 다른 웹 요청 라이브러리와 달리 axios는 CSRF 보호 기능이 내장되어 있으며 이전 브라우저를 지원하며 약속 구조를 사용합니다. 웹 요청을 하는 데 적합합니다.

이제 전문 웹 개발자처럼 axios를 사용하여 GET 및 POST 요청을 할 준비가 되었습니다.