vue에서 get가 전송 데이터를 해결하도록 요청하는 것은 그룹 형식의 문제입니다

qs의stringify는 2개의 매개 변수를 수신합니다. 첫 번째 매개 변수는 서열화되어야 하는 대상입니다. 두 번째 매개 변수는 전환 형식입니다. 일반적인 기본 형식은 명확한 인덱스를 제공합니다. 예를 들어arr[0]=1&arr[1]=2

//indices index , indices 
//bracket , arrayFormat:'brackets' []

qs.stringify({ arr: [1,2,3] }, { indices: false }) //arr=1&arr=2&arr=3
qs.stringify({ arr: [1,2,3] }, { arrayFormat: 'indices' }) //arr[0]=1&arr[1]=2&arr[2]=3
qs.stringify({ arr: [1,2,3] }, { arrayFormat: 'brackets' }) //arr[]=1&arr[]=2&arr[]=3
qs.stringify({ arr: [1,2,3] }, { arrayFormat: 'repeat' }) //arr=1&arr=2&arr=3
qs의parse() 사용
인터페이스가 get 요청 인터페이스의 요청 데이터를 가져오려면parse () 를 사용하여 주소에 연결된 매개 변수 데이터를 대상으로 변환할 수 있습니다

let url = "111.111.3.203:8080/getList?id=1&name=huahua&arr=a&arr=b"
let splitObj = url.split('?')[1]
qs.parse(splitObj )  //{ id: '1', name: 'huahua', arr: ['a','b'] }
qs.stringify와 JSON.stringify의 차이

let obj = { a: 1, b: 2 }
qs.stringify(obj)  //a=1&b=2
JSON.stringify(obj) // "{'a': 1, 'b': 2}"
qs 수조 매개 변수 문제 해결
axios,qs 설치
npm install qs
npm install axios -S
메인js에 qs 도입

import Vue from 'vue'
import qs from 'qs'
import axios from 'axios'
Vue.prototype.$qs = qs;  //qs vue 
Vue.prototype.$http = axios; //axios vue 
어셈블리에서 사용
get 요청의 요청 매개 변수는 config의params에 데이터를 넣는 것입니다. 실제적으로'&'를 통해 URL에 연결됩니다.
요청 파라미터가 수조arr=[1,2,3]이면 get 요청이 수조를 처리하지 않으면 백엔드에 전달되는 인터페이스는
"url 주소?arr[]=1&arr[]=2&arr[]=3", 인터페이스가 잘못됩니다. "[]"기호를 식별할 수 없기 때문입니다.
수조를 수정해야 합니다. qs의stringify() 방법을 통해 수조를 서열화해야 합니다. 백엔드에 전달되는 인터페이스는'url 주소?arr=1&arr=2&arr=3'입니다. 인터페이스가 틀리지 않습니다.

this.arr = [1,2,3]
// , qs stringify()
this.$http.get('url ', {
 params: {
 arr: this.$qs.stringify(this.arr)  // url  url ?arr=1&arr=2&arr=3
 }
}).then(() => {
}) 

//  , axios paramsSerializer 
this.$http.get('url ', {
 params: {
 arr: this.arr  // url  url ?arr=1&arr=2&arr=3
 },
 paramsSerializer: (params) => {
 return this.$qs.stringify(params) 
 }
}).then(() => {
}) 
상기 vue에서 get가 전송 데이터를 해결하라고 요청한 것은 수조 형식의 문제입니다. 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고도 해주시고 저희를 많이 사랑해 주십시오.

좋은 웹페이지 즐겨찾기