axios請求中contentType型別

最近專案遇到重繪token介面有時候會報錯的問題，打算配置axios.retry，在介面報錯之后重新發起請求，配置的時候不小心寫錯代碼，導致再次發送的請求中傳參形式錯誤，Content-Type也不一致，如下圖：
正確傳參
傳參形式例外
代碼中并沒有重新配置Content-Type，為什么它會自動變化呢？
查看axios的原始碼，對hearder的content-type進一步了解發現，axios的Content-Type根據請求方法為’post’、‘put’、‘patch’默認添加了請求頭’application/x-www-form-urlencoded’，
在這里插入圖片描述
在發送請求的時候，會根據引數的資料型別，重新配置請求頭Content-Type，若傳參是key1=val1&key2=val2的形式，Content-Type就是’application/x-www-form-urlencoded’,若傳參是物件型別，Content-Type對應是’application/json’.

在這里插入圖片描述
若傳參是formData，則不需要配置content-Type，

得出結論：
(1) ‘post’、‘put’、‘patch’ 請求方式下的Content-Type首先是默認配置的’application/x-www-form-urlencoded’;
(2) 若傳參型別是json物件，請求頭就自動更改Content-Type:‘application/json;charset=utf-8’;
(3) 傳參是formData型別時，瀏覽器自己設定content-type，
所以在我們的代碼中，一般不用設定默認的content-type，

不同型別的content-type傳參格式

在axios的配置中，params用于接收與請求一起發送的URL引數，它要求接收的資料必須是一個無格式物件或URLSearchParams物件，一般用于get方法中，data用于請求方法為’put’、‘post’、‘patch’，在沒有設定transformRequest時，要求接收的資料型別為string、plain object、ArrayBuffer、ArrayBufferView、URLSearchParams，
一、application/x-www-form-urlencoded
這種方式提交的資料為鍵值對并按照key1=val1&key2=val2的方式進行編碼，

import qs from 'qs';
const data={'bar':123};
const options={
	method:'POST',
	headers:{'content-type':'application/x-www-form-urlencoded'},
	data:qs.stringify(data),
	url,
};
axios(options);

二、application/json
application/json作為請求頭，用來告訴服務端訊息主體是序列化的JSON字串，

const data={'bar':123};
const options={
	method:'POST',
	headers:{'content-type':application/json'},
	data:data,
	url,
};
axios(options);

三、multipart/form-data
這種方式既可以上傳鍵值對，也可以用于上傳檔案，

 const formData = new FormData();
 formData.append('file', this.form.file.raw);
const options={
	method:'POST',
	data:formData,
	url,
};
axios(options);

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/273808.html

標籤：其他

上一篇：靠這份面試攻略，騰訊微信支付安卓開發崗四面上岸啦

下一篇：Android安全風險與防范措施

axios請求中contentType設定與提交資料的形式

axios請求中contentType型別

不同型別的content-type傳參格式