Axios 사용 단계에 대한 자세한 설명(코드 포함)

이번에는 Axios를 사용하는 단계(코드 포함)에 대해 자세히 설명하고, Axios 사용 시 주의사항은 무엇이며, 다음은 실제 사례이므로 살펴보겠습니다.

Axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 라이브러리입니다. Youda의 추천으로 인해 axios는 점점 더 인기를 얻고 있습니다. 최근 프로젝트에서 Axios를 사용하면서 몇 가지 문제에 직면했는데, 이번 기회에 이를 요약해서 설명하겠습니다. 혹시 잘못된 점이 있으면 언제든지 수정해 주시기 바랍니다.

특징

브라우저가 XMLHttpRequests 요청을 시작합니다

노드 계층은 http 요청을 시작합니다

약속 API 지원

요청 및 응답 가로채기

요청 및 응답 데이터 변환

요청 취소

JSON 데이터 자동 변환

클라이언트는 XSRF(사이트 간 요청 위조)에 대한 방어를 지원합니다

npm
npm 설치 axios

bower
bower 설치 axios

CDN

요청하세요

GET rreee

포스트 rreee

메모

Params는 GET 메소드를 사용하여 매개변수를 전달할 때 사용되며 공식 문서에서는 다음과 같이 소개합니다. params는 URL 매개변수입니다. 요청과 함께 전송되어야 합니다. 일반 객체 또는 URLSearchParams여야 합니다. 물체. 다음과 같이 번역됨: params는 요청을 보내기 위한 URL 링크의 매개변수로 사용되며 일반 객체 또는 URLSearchParams여야 합니다. 물체. 일반 객체(Plain object)란 JSON 형태로 정의된 일반 객체를 말하거나 새로운 객체를 말합니다. URLSearchParams 동안 Object()에 의해 생성된 단순 객체; 객체는 URL을 처리하기 위해 URLSearchParams 인터페이스에서 정의할 수 있는 여러 유틸리티 메서드를 참조합니다. 쿼리

문자열

개체, 즉 params 매개변수가 /user?ID=1&name=mike&sex=male 형식으로 전달됩니다. POST를 사용할 때 해당 매개변수 전송은 데이터를 사용하며 데이터는 요청 본문으로 전송됩니다. 이 형식은 PUT, PATCH 및 기타 요청 방법에도 사용됩니다. 한 가지 주목할 점은 axios에서 POST의 기본 요청 본문 유형은 Content-Type: application/json(JSON 사양이 널리 사용됨)이라는 것입니다. 이는 또한 가장 일반적인 요청 본문 유형이기도 합니다. 이는 직렬화된 json 형식이 사용됨을 의미합니다. 다음과 같은 매개변수를 전달합니다. "이름": "마이크", "섹스": "남성" }; 동시에 백엔드는 @RequestBody를 지원하는 형식으로 매개변수를 수신해야 합니다. 그렇지 않으면 프런트엔드가 매개변수를 올바르게 전달하지만 백엔드는 이를 수신할 수 없습니다.

유형을 Content-Type:application/x-www-form-urlencoded(기본 브라우저 지원)로 설정하려는 경우 axios는 다음과 같은 두 가지 방법을 제공합니다.

브라우저 측

rreee 하지만 모든 브라우저가 URLSearchParams를 지원하는 것은 아닙니다. caniuse.com에서 호환성을 확인하세요. 하지만 여기에는 Polyfill(폴리필: 브라우저가 지원하지 않는 네이티브 API를 구현하는 데 사용되는 코드로, 막연히 패치라고 이해될 수 있습니다.) 글로벌 환경에서 폴리필을 확인하세요).

또는 qs 라이브러리를 사용하여 데이터 형식을 지정할 수도 있습니다. 기본적으로 qs 라이브러리는 axios 설치 후 사용할 수 있습니다.

rreee

노드 레이어

Querystring은 노드 환경에서 사용할 수 있습니다. 마찬가지로 qs를 사용하여 데이터 형식을 지정할 수도 있습니다.

rreee

보충제

양식 데이터를 제출하는 데 일반적으로 사용되는 형식인 multipart/form-data(브라우저에서 기본적으로 지원됨)라는 또 다른 일반적인 요청 본문 유형이 있습니다. x-www-form-urlencoded와 비교하면 후자는 다음과 같이 인코딩된 데이터입니다. '&'는 키-값 쌍을 구분하고, '='는 키와 값을 구분합니다. 영숫자 또는 숫자가 아닌 문자는 백분율로 인코딩됩니다(URL 인코딩), 이것이 이 유형이 바이너리 데이터를 지원하지 않는 이유입니다(대신 multipart/form-data를 사용해야 함).

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Angular4 입력 및 출력 사용 방법

WeChat 애플릿에 팝업 대화 상자 추가

위 내용은 Axios 사용 단계에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!