パラメータにオブジェクト配列を持つリクエストがあり、元々はpostリクエストで、後にインターフェースをgetリクエストに変更すると、axiosリクエストのパラメータは自然にdataからparamsに変更されます。
最初の変更後のリクエストは次のとおりです:
パス全体に対する
リクエストパラメータの形式は次のとおりです
.配列[配列内のオブジェクト属性]:オブジェクトの値がこの形式になっているのは、リクエストは以前に傍受され、取得リクエスト配列が処理されました。コードは次のように表示されます:
if (config.method === 'get') {
// 如果是get请求，且params是数组类型如arr=[1,2]，则转换成arr=1&arr=2
config.paramsSerializer = function(params) {
return qs.stringify(params, {
arrayFormat: 'repeat' })
}
}
しかし、バックエンドが必要とするデータ形式は、このような配列[配列内のオブジェクトの添字] オブジェクト属性: オブジェクトの属性値:
明らかに違いから少し離れています。
次に、Baidu は qs.stringify メソッドから適切な処理方法を見つけられるかどうかを検索しました。
arrayFormat 配列をフォーマットするには、いくつかの方法があります。
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'
それから繰り返しフォーマットは最初に使ったもので、明らかに間違っていたので、他のものを1つずつ試しました.
インデックスの形式:
インデックスの形式は少し似ているように見えますが、インターフェースは[attribute]ではなく.attribute を必要とするため、この処理は受け入れられません。
ブラケット形式:
ブラケット形式では、下付き文字が完全に削除されます。また、そうではありません
コンマ形式:
コンマの形式は、オブジェクトを完全に配列するためのものですが、どのようなデータ形式なのかよくわかりません! もちろん違います。
したがって、アピールの方法は機能せず、インデックスの形式が似ているだけです。
フォーラムをチェックし続けると、qs.stringifyの新しい使用法が表示されました. メッセージを見ると、私が望むデータ形式が達成されているようです. コードは次のとおりです:
qs.stringify(data, {
allowDots: true, encode: false })
その結果、要求されたパラメーターは実際にバックエンドの要件を満たしています。
インターフェイスは引き続き 400 を報告し、要求されたパラメーターにはまだ問題があります。
次に、比較のために 2 つの
リクエストパスのパラメーターのスクリーンショットを撮りました
。確認したところ、URLエンコード処理が必要であることがわかりました.URLエンコードの具体的な知識を知りたい場合は、 Ruan Yifengのエンコード処理に関する記事を読むことができます.
最終的には、元の qs.stringify プロセスの上にもう 1 つの URL エンコード プロセスが追加されただけです。
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 }))
}
}
最終リクエストのスクリーンショットは次のとおりで、正常に 200 リクエストになります。
