非同期要求のformDataパラメータのカスタマイズ

概要
この文章ではhtml非フォーム提出時にフォームデータをシミュレートし,通常のオブジェクトデータを単純にカプセル化し,所望のform-dataデータとしてバックグラウンドに要求する.まず、FormDataとContent-Type:multipart/form-dataについて理解する必要があります.

FrmDataタイプは、XMLHttpRequest 2レベルで定義されています.これは、シーケンス化テーブルおよびフォーム形式と同じデータの作成(もちろんXHR転送用)に便利です.

form-data:httpリクエストのmultipart/form-dataです.フォームのデータをメッセージとして処理し、ラベルを単位とし、区切り記号で区切ります.キー値ペアをアップロードすることも、ファイルをアップロードすることもできます.アップロードされたフィールドがファイルである場合、Content-Typeがファイルタイプを表す.boundary分離があるためmultipart/form-dataはファイルをアップロードしたり、キー値ペアをアップロードしたりすることができ、キー値ペアを採用しているので、複数のファイルをアップロードすることができます.

コンストラクタ
formDataオブジェクトインスタンスを作成するにはいくつかの方法があります.

空のオブジェクトインスタンス

を作成

var form = new formData();

append(key,value)メソッドを呼び出してformインスタンスにデータを追加できます.まず、formDataに格納されているデータ形式を明確にし、一対のkey/valueが1つのデータを構成し、keyが唯一であり、1つのkeyが複数のvalueに対応する可能性がある.フォームの初期化を使用する場合、各フォームフィールドはデータに対応し、HTML nameプロパティはkey値であり、valueプロパティはvalue値に対応します.指定したkeyが存在しない場合はデータが追加され、keyが存在する場合はデータの最後に追加されます.最初のステップでインスタンス化したformの例を使用します.

form.append('checked', 'A')

form.append('checked', 'B')

form.append('userName', 'Susan')

//    form      ：
// checked: ['A', 'B']
// userName: 'Susan'

ここでバックグラウンドに転送する必要があるデータをobjToFormDataという名前のメソッドにカプセル化します.コードは次のとおりです.

/**
 * objToFormData
 * @param {Object}
 * @returns {formData}
 *         formData  
 */
export const objToFormData = (obj) => {
    let data = new FormData()
    for (let i in obj) {
        data.append(i, obj[i])
    }
    return data
}

このようにカプセル化すると、インタフェースを呼び出すたびにobjToFormData()メソッドを呼び出すだけでいいです.
2.それ以外に、既存のフォームを使用してオブジェクトインスタンスを初期化することもできます.

//          form  
var form = document.getElementById("myForm");
//        
var formData = new FormData(form);
//       name         
var name = formData.get("name"); //     
var psw = formData.get("psw"); //     
//           ，      
formData.append("token","kshdfiwi3rh");

formDataの操作方法
1.formDataのkey/value値の取得:get()/getAll()
図上のコードから、get()メソッドはvalueの最初の値を取得し、getAll()メソッドはkeyに対応するvalueが元のデータ型であるかどうかにかかわらず配列を取得していることがわかります(getAll('name')とgetAll('age'))
2.formDataのキーの値set()を変更する
同様にset()メソッドでvalueを再設定しても、データ型を変更できます.
3.formDataのkey/value値を削除する:delete()
4.formDataのその他の方法
よく使われるのは以上の4つで、その他の方法は判断や遍歴などに用いられ、具体的にはビジネスシーンによって異なります.