いくつかの一般的なリクエストヘッダのContent-Type Axios

　　Vue2.0後、関係者は特に雨の中、川Axiosが大幅にアヤックスを交換することをお勧め、VUE-リソースを維持し続けることはありません。

　　AxiosリクエストヘッダのContent-Typeの共通三種類あります：

　　　　1.Content-タイプ：application / jsonの

　　　　2.Content-タイプ：application / x-www-form-urlencodedで

　　　　3.Contentタイプ：マルチパート/フォームデータ

　　ここでは1が例示されています。

1.Content-タイプ：application / jsonの

　　特に明記していない場合は、アプリケーション/ JSON Axiosは、デフォルトのContent-Typeである私の最も一般的に使用され、それはデータ量がJSON文字列としてバックエンドにリクエストを送信されることを述べています。したがって、要求は、JSONシリアル化の背景に必要なデータを渡す必要があります。

VaRの paramsは= {
     "範囲" ：{
         "長さ"：100 、
         "開始"：0 
    }、
     "branchId" '100001' 
}; 
これ。axios.post $（ "/ XXXX / XXXX"、のparams）.then（データ=> {
     // するために行います 
}）;

　　図2に示すように我々は、GoogleのネットワークブラウザF12に要求ペイロードを見ることができます。

図1 AxiosデフォルトのContent-Type：アプリケーション/ JSON

2.Content-タイプ：application / x-www-form-urlencodedで

　　コンテンツタイプ：アプリケーション/ x-www-form-urlencodedで、キーを宣言しますが（一般的な形式のフォーマット）のバックエンドに送信され、このタイプのデータリクエストボディはデフォルトのAjaxです。時折、私は、この時間は、あなたが頭の中で設定されたヘッダに必要であることを、彼らに鍵を与えるために、バックエンドに合格する必要があります：{「Content-Typeの」：「アプリケーション/ x-www-form-urlencodedで」}、

その後、リクエストボディセットのペアのデータ。しかし、我々は、パッケージ本体は、通常、JSONオブジェクトである要求し、この時間は、あなたは、URLの引数に適量のライブラリオブジェクトを使用することができます。

　　Axiosデフォルトの適量があり、あなたはNPMは必要ありません。オブジェクト引数にURL 2 ...;オブジェクトに1つのURLパラメータ：その役割は2つあり

インポート'QS'からQS ; 

VAR URL = 'パスワード=＆ADMINのuserId = hellworld' ;
 // 対象への切り替え
はconsole.log（qs.parse（URL））;
 VAR人= {名： '立華'、年齢：18です};
 // 変換後のURLパラメータの形 
はconsole.log（qs.stringify（人））;

出力はブラウザで、図2に示します。

図2 QS役割

　　我比较爱用的就是这种方法，简单粗暴，如图3所示。在谷歌浏览器F12的network中Form Data，如图4所示。

import qs from 'qs'
var data = {
    "username": "admin",
    "password": "123456"
}

axios({
    url: '/OAuth/oauth/token',
    method: 'post',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: qs.stringify(data)
})

图3 我在工程中的对application/x-www-form-urlencoded的使用

图4 AjAx默认Content-Type:application/x-www-form-urlencoded

　　有一次出现的一个问题，觉得有必要记录一下。一旦使用qs库的方法，就应该注意不能对请求体中的数据使用扩展运算符。否则，你就会看到请求体种出现如图5的情况。

图5 formdata展示请求体出现神奇的现象

　　可以看到图3，这个request实例是从'@/plugin/axios'中定义出来的，我们去看这个'@/plugin/axios'里的请求拦截部分service.interceptors.request.use()，很容易就看出问题了，问题就出在这三个点上，如图6所示：扩展运算符将一个数组、类数组、字符串转化为用逗号分隔的序列。

图6 qs库方法的时候请勿与扩展运算符共同使用

还有一种方法就是使用URLSearchParams对象，写法如下：

let data = new URLSearchParams();
data.append('username', 'admin');
data.append('password', '123456');

axios({
    url: '/OAuth/oauth/token',
    method: 'post',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: data
})

3.Content-Type: multipart/form-data

　　Content-Type:multipart/form-data，则一般用来上传文件，指定传输数据为二进制数据，例如图片、mp3、文件，也可以用来上传键值对。简单写法如下：

<input type="file" />

let data = new FormData();
data.append('userfile', document.querySelector('input[type=file]').files[0]);
data.append('username', 'admin');
data.append('password', '123456');

axios({
    url: '/XXXX/XXXX',
    method: 'post',
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    data: data
})

　　这里说点题外话，Request Payload翻译过来就是请求载荷，就是一种载体。但是我百度了很久也没找到它的定义，最后终于在stackoverflow上发现一个大佬lefloh给出了他的理解得到了大家的支持，大家有兴趣可以去看看，链接在此：https://stackoverflow.com/questions/23118249/whats-the-difference-between-request-payload-vs-form-data-as-seen-in-chrome；

　　大致意思就是你正常发起的一个请求，浏览器都会简单的将你提交的内容展示出来。所展示的内容只是因为Content-Type设置的不同，而并不是因为数据提交方式的不同。如果一个请求的header设置为Content-Type:application/json，那么浏览器就会以Request Payload来显示你的请求体，所以基本数据格式为JSON对象，如图1所示；如果一个请求被设置为method="post"，并且请求的header设置为Content-Type:application/x-www-form-urlencoded或者Content-Type:multipart/form-data，那么浏览器就会以Request Payload来显示你的请求体，所以基本数据格式为键值对，如图4所示。

いくつかの一般的なリクエストヘッダのContent-Type Axios

おすすめ