자바스크립트 학습에 관심이 있으십니까? jshandbook.com에서 내 eBook 받기
소개
Axios는 HTTP 요청을 수행하는 데 사용할 수 있는 매우 인기 있는 JavaScript 라이브러리입니다. 브라우저와 Node.js 플랫폼 모두에서 작동합니다.
Is는 IE8 이상을 포함한 모든 최신 브라우저를 지원합니다.
Promise 기반이며 이를 통해 XHR 요청을 매우 쉽게 수행하는 비동기/대기 코드를 작성할 수 있습니다.
Axios를 사용하면 기본 Fetch API에 비해 몇 가지 장점이 있습니다.
- 이전 브라우저 지원(Fetch에는 폴리필 필요)
- 요청을 중단하는 방법이 있음
- 응답 시간 제한을 설정하는 방법이 있음
- CSRF 보호 기능이 내장되어 있음
- 업로드 진행 지원
- 자동 JSON 데이터 변환 수행
- Node.js에서 작동
설치
Axios는 npm을 사용하여 설치할 수 있습니다.
npm install axios또는 원사:
yarn add axios또는 unpkg.com을 사용하여 페이지에 포함하기만 하면 됩니다.
<script src="https://unpkg.com/axios/dist/axios.min.js"><;/script>액시오스 API
axios에서 HTTP 요청을 시작할 수 있습니다. 개체:
axios({ url: 'https://dog.ceo/api/breeds/list/all', method: 'get', data: { foo: 'bar' }})그러나 편의상 일반적으로 사용합니다.
axios.get()axios.post()
(jQuery에서처럼 $.get() 및 $.post() $.ajax() 대신 )
Axios는 덜 유명하지만 여전히 사용되는 모든 HTTP 동사에 대한 메서드를 제공합니다.
axios.delete()axios.put()axios.patch()axios.options()
또한 본문을 버리고 요청의 HTTP 헤더를 가져오는 방법을 제공합니다.
GET 요청
Axios를 사용하는 편리한 방법 중 하나는 최신(ES2017) async/await 구문을 사용하는 것입니다.
이 Node.js 예제는 Dog API를 쿼리하여 axios.get()을 사용하여 모든 개 품종 목록을 검색합니다. , 그리고 계산합니다:
const axios = require('axios')const getBreeds = async () => { try { return await axios.get('https://dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) }}const countBreeds = async () => { const breeds = await getBreeds() if (breeds.data.message) { console.log(`Got ${Object.entries(breeds.data.message).length} breeds`) }}countBreeds()async/await를 사용하지 않으려면 Promises 구문을 사용할 수 있습니다.
const axios = require('axios')const getBreeds = () => { try { return axios.get('https://dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) }}const countBreeds = async () => { const breeds = getBreeds() .then(response => { if (response.data.message) { console.log( `Got ${Object.entries(response.data.message).length} breeds` ) } }) .catch(error => { console.log(error) })}countBreeds()GET 요청에 매개변수 추가
GET 응답은 https://site.com/?foo=bar와 같이 URL에 매개변수를 포함할 수 있습니다. .
Axios를 사용하면 해당 URL을 사용하여 간단히 수행할 수 있습니다.
axios.get('https://site.com/?foo=bar')
또는 params를 사용할 수 있습니다. 옵션의 속성:
axios.get('https://site.com/', { params: { foo: 'bar' }})POST 요청
POST 요청을 수행하는 것은 GET 요청을 수행하는 것과 같지만 axios.get 대신 , axios.post을 사용합니다. :
axios.post('https://site.com/')POST 매개변수를 포함하는 개체는 두 번째 인수입니다.
axios.post('https://site.com/', { foo: 'bar' })자바스크립트 학습에 관심이 있으십니까? jshandbook.com에서 내 eBook 받기