이 문제는 여전히 콘텐츠 유형에 대해 거의 알지 못하기 때문에 발생합니다.
나는 항상 post 요청이 json 객체를 전달할 수 있다고 생각하고 get은 splicing key = value입니다. 다음 그림과 같이 프로젝트의 api 문서에서 백엔드 포스트 요청이 요청 본문이 아니라 "URL 연결"인 것으로 판명 될 때까지
나는 백엔드를 찾기로 맹세했지만 결국 내가 너무 적게 알고 있다는 것이 밝혀졌다. 이로써 기록합니다.
1. 프로젝트는 axios를 사용합니다. axios가 요청을 보낼 때 params와 데이터의 차이점에 대해 :
1. 매개 변수가 URL의 요청 문자열에 추가되고 요청 가져 오기에 사용됩니다.
2. 데이터는 요청 후 요청 본문 (본문)에 json 객체를 추가하는 것입니다.
3. Get 요청은 쿼리 매개 변수 만 전달할 수 있으며 쿼리 매개 변수는 모두 요청 주소에 철자가 표기되어 있습니다 ..
4. Post는 본문 및 쿼리 매개 변수를 모두 전달할 수 있습니다 .
참고 : get은 데이터를 전달할 수 없습니다.
get 요청에서 axios는 URL 스 플라이 싱 형식으로 전달하는 객체를 구문 분석합니다.
요청 후의 경우 key1 = value1 & key2 = value2 형식과 같이 키-값 쌍 데이터를 사용하여 매개 변수를 전달하려는 경우 두 가지 구현 방법이 있습니다.
(1) qs 라이브러리의 qs.stringify 메소드로 구현할 수 있습니다.
(2) 데이터없이 매개 변수 전달
2. 콘텐츠 유형 정보 :
1. Content-Type이 application / json으로 설정되면 json 객체 형태로 백엔드에 전달됩니다.
2. Content-Type이 application / x-www-form-urlencoded 또는 Content-Type : multipart / form-data로 설정되면 key = value 형식으로 백엔드로 전송됩니다.
3. 두 가지의 차이점은 데이터 제출 방법이 아니라 Content-Type 설정이 다르기 때문입니다. 두 제출 모두 데이터 body를 입력하지만 Chrome 브라우저의 개발자 도구는이 ContentType에 따라 표시 방법을 구분합니다. 동시에 백엔드 수신 방법이 다릅니다.
3. 두 가지 형식의 인코딩 방법 간의 차이점 : application / x-www-form-urlencoded 및 multipart / form-data :
첫째, application / x-www-form-urlencoded가 기본 인코딩 방법입니다.
1. 양식의 동작이 get이면 브라우저는 x-www-form-urlencoded의 인코딩 방법을 사용하여 양식 데이터를 key = value 형식으로 인코딩 한 다음이 문자열을 URL 뒤에 연결하여?
2. 양식의 동작이 게시일 때 브라우저는 http 본문에 양식 데이터를 캡슐화 한 다음 서버로 보냅니다.
3. type = file이 없으면 기본 application / x-www-form-urlencoded를 사용합니다.
4. type = file이 있으면 multipart / form-data 인코딩을 사용합니다.
넷째, qs 라이브러리의 사용법은 다음과 같습니다.
1. npm 설치
npm install qs
// cnpm install qs2. 가져 오기 ( 일반적으로 http 요청을 정의하는 파일에 있음 )
import qs from 'qs'3. 사용 (다음은 프로젝트에 패키지 된 두 가지 유형의 포스트를 비교 한 것입니다)
// 拼接url
post(path, data) {
return this.init('POST', path, qs.stringify(data))
}
// json对象
postByJson(path,data){
return this.init('POST', path, data,{
'Content-Type': 'application/json'
})
}