Javascript에서 게시물 요청을 만드는 방법

Michael Zippo

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

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

Axios를 선택해야 하는 이유

Axios는 웹 요청 만들기

궁금할 수 있습니다. 다른 많은 웹 요청 라이브러리 중 하나에서 Axios를 사용해야 하는 이유는 무엇입니까? GET 요청을 만드는 데 사용할 수 있는 extract와 같은 다른 라이브러리가 있는 것은 사실이지만 Axios에는 이러한 라이브러리가 없는 많은 이점이 있습니다.

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

Axios 설치 방법

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

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

Axios 도움말 신청 방법

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

가정 chat -Facts 다음 코드를 사용하여 수행할 수 있습니다.

이 코드는 이 HTTP 요청의 데이터를 검색하기 위해 아직 완료되지 않은 요청을 나타내는 약속을 반환합니다. 다음과 같은 비동기/대기 기능을 사용합니다.

wi 서버는 채팅 사실 목록으로 응답했습니다.

이 함수를 호출하면 HTTP GET 요청이 chat-facts API로 전송됩니다. 웹 요청이 완료될 때까지 프로그램이 계속되지 않도록 비동기/대기 기능을 사용합니다. Axios가 먼저 Promise를 반환하기 때문입니다. 요청이 완료된 후 요청 데이터를 반환합니다.

Axios 라이브러리에는 요청에 사용할 수 있는 단축 명령이 포함되어 있습니다.

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

이 튜토리얼에서는 axios에 초점을 맞출 것입니다. get() 및 axios.post()는 다른 모든 단축 메서드와 동일한 기본 구문을 사용합니다.

Axios를 사용하여 GET 요청 만들기

마지막 예에서 우리는 GET 요청을 할 수 있는 Axios 기회가 있습니다. 그러나 Axios:를 사용하여 GET 요청을 만드는 더 쉬운 방법이 있습니다.

axios.get () 사용 고양이에 대한 사실 목록을 검색하고 싶다고 가정하고 얼마나 많이 반환되었는지 계산합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

이 응답을 생성한 코드: 225개의 채팅 사실이 반환되었습니다.

코드 분해. 먼저 웹 요청을 수행하는 getCatFacts()라는 비동기 함수를 선언했습니다.

그런 다음 axios.get( ): chat-facts API에서 채팅 사실 목록을 검색합니다. "Response.data"에는 응답 개체와 요청 본문이 포함되어 있습니다.

마지막으로, .length 속성을 사용하여 요청에 의해 반환된 고양이 팩트 수를 계산한 다음 해당 숫자를 " cat 팩트 반환됨" 문자열에 추가합니다.

Axios를 사용하여 헤더 보내기

GET 요청, 사용자 정의 헤더를 현재 리소스 웹 사이트로 보내야 할 수도 있습니다. 요청합니다. 사이트 인증이 필요한 API입니다. 인증 헤더를 지정해야 할 수도 있습니다

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

이 코드는 ` header` 헤더 이름을 보냅니다. " 우리가 지정한 URL에 "헤더 값"을 사용합니다.

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

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

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

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

이 두 예는 이름이 " date "이고 값이" 05/15/2020 "지정된 URL에서.

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

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

게시 API에 요청을 보내려는 경우 다음 코드를 사용하면 됩니다.

GET 요청과 동일한 방식으로 헤더와 매개변수를 지정할 수 있습니다. ur POST 요청. 다음 코드를 사용하여 수행할 수 있습니다.