Hay una solicitud en la que el parámetro tiene una matriz de objetos. Originalmente era una solicitud posterior, y la interfaz se cambió a una solicitud de obtención más tarde. Luego, los parámetros de la solicitud axios se cambian naturalmente de datos a parámetros.
La solicitud después de la primera modificación es la siguiente: el formato del parámetro de solicitud
para toda la ruta es el siguiente . La razón por la que se convierte en una matriz [atributo del objeto en la matriz]: el valor del objeto está en este formato porque el La solicitud se interceptó antes y se procesó la matriz de solicitud de obtención. El código se muestra a continuación:
if (config.method === 'get') {
// 如果是get请求，且params是数组类型如arr=[1,2]，则转换成arr=1&arr=2
config.paramsSerializer = function(params) {
return qs.stringify(params, {
arrayFormat: 'repeat' })
}
}
Pero el formato de datos requerido por el backend es como esta matriz [el subíndice del objeto en la matriz] Atributo del objeto: el valor del atributo del objeto :
obviamente está un poco lejos de la diferencia.
Luego, Baidu buscó para ver si podíamos encontrar un método de procesamiento adecuado del método qs.stringify.
arrayFormat Hay varias formas de formatear matrices:
qs.stringify({
a: ['b', 'c'] }, {
arrayFormat: 'indices' })
// 输出结果：'a[0]=b&a[1]=c'
qs.stringify({
a: ['b', 'c'] }, {
arrayFormat: 'brackets' })
// 输出结果：'a[]=b&a[]=c'
qs.stringify({
a: ['b', 'c'] }, {
arrayFormat: 'repeat' })
// 输出结果：'a=b&a=c'
qs.stringify({
a: ['b', 'c'] }, {
arrayFormat: 'comma' })
// 输出结果：'a=b,c'
Luego, el formato de repetición fue el que usé al principio, que obviamente estaba mal, así que probé otros uno por uno.
El formato de los índices: el formato de
los índices parece ser un poco similar, pero la interfaz requiere .attribute en lugar de [attribute] , por lo que este procesamiento no es aceptable.
Formato de corchetes: ¡
El formato de corchetes elimina por completo el subíndice! tampoco
formato de coma: el formato de
coma es para ordenar el objeto por completo. ¡No entiendo muy bien qué tipo de formato de datos es! Por supuesto que no.
Por lo tanto, el método de apelación no funciona, solo el formato de índices parece similar.
Seguí revisando el foro y vi el nuevo uso de qs.stringify . Mirando el mensaje, parece que se logró el formato de datos que quiero. El código es el siguiente:
qs.stringify(data, {
allowDots: true, encode: false })
Como resultado, los parámetros solicitados realmente cumplen con los requisitos del backend:
la interfaz todavía informa 400 y todavía hay problemas con los parámetros solicitados.
Luego tomé una captura de pantalla de los parámetros en la ruta de solicitud de los dos para compararlos: el
mío:
requerido por el backend:
se puede ver claramente que los subíndices en los datos requeridos por el backend no usan corchetes []. Después de verificar, me di cuenta de que se necesita el procesamiento de codificación de URL. Si desea conocer el conocimiento específico de la codificación de URL, puede leer el artículo de Ruan Yifeng sobre el procesamiento de codificación.
Al final, es solo un proceso de codificación de URL más además del proceso qs.stringify original:
if (config.method === 'get') {
// 如果是get请求，且params是数组类型如arr=[1,2]，则转换成arr=1&arr=2
config.paramsSerializer = function(params) {
return encodeURI(qs.stringify(params, {
allowDots: true, encode: false }))
}
}
La captura de pantalla de la solicitud final es la siguiente, que se convierte con éxito en 200 solicitudes:
