老夫子我正在憋方案書，聽到身后傳來細軟的聲音：“李哥，我這有個Bug調了很長時間了，您能幫我看一下嗎？”。說這話的是我的好朋友，公司新來的前端小妹伊萬卡。我起身向她走去，看到因長時間調試Bug漂亮的臉蛋上泛起的紅暈，原來人會變的溫柔，一點都不像我。
“
我使用vue中的http方法異步刪除一個圖片，后端怎么也接收不到我發的參數，同時還報個500。
”
聽完伊萬卡小妹描述的這個Bug臨床表現，根據我多年的行醫經驗，已大體猜出病灶所在。但我並不想這么快結束這次義診，你們是了解我的,讓她透徹的懂了，才是我的選擇。
老夫整理下外套，端庄的坐在了小妹的工位上，開始我的治病救人過程：望、聞、問、切。
一：望
在瀏覽器中把這個功能跑一下，打開調試窗口，找到這個XHR（XMLHttpRequest）請求連接，看Headers選項卡最下面，如下圖所示
Request Payload，請注意這個數據格式。
二：聞
打開伊萬卡小妹寫的代碼，我終於看出了傳說中詩的感覺，同樣26個字母，小妹敲出來的就是好看。
this.$vux.confirm.show({
title: "提示",
content: "確定要刪除此圖片嗎？",
onConfirm() {
that.$http({
method: "post",
url: `${that.$$baseURL}/upload/delBelowImg`,
headers: {
token: token,
'Content-Type':'application/json'
},
data:{
file:item.filePath,
id:id,
name:item.name
}
}).then(res => {});
}
});
我發誓，以上代碼絕對出自伊萬卡之手，分毫未改。但當這個片段出現在我博文里時屁感覺沒有，你說奇怪不奇怪。
三：問
我轉頭看向寫java的川普，說：“小川，把你和伊萬卡小妹對接的這個接口，代碼發我一下”。5秒中之后，我收到了如下毫無美感的代碼。
@RequestMapping(value = "/delBelowImg")
@Transactional
public void delBelowFile(@RequestParam Map<String, Object> params,HttpServletRequest request){
try {
……
} catch (Exception e) {
……
}
}
@RequestParam 注意這個注解。
四：切
到這里我已經確切的知道了病因，我略作分析，在望環節，我們看到伊萬卡小妹詩一樣的代碼發出請求，在瀏覽器發送請求參數格式是：
Request Payload，在問環節，看到小川寫的代碼，注解是@RequestParam，所以結果是，小妹發送的請求數據格式與小川的不統一，怪不得接受不到參數。
我在小妹的代碼基礎上略作改動如下（標紅是改動部分）：
const data = {
file:item.filePath,
id:id,
name:item.name
}
this.$vux.confirm.show({
title: "提示",
content: "確定要刪除此圖片嗎？",
onConfirm() {
that.$http({
method: "post",
url: `${that.$$baseURL}/upload/delBelowImg`,
headers: {
token: token,
'Content-Type':'application/json'
},
params:data
}).then(res => {});
}
});
我再次打開瀏覽器，這次發送參數的格式成了 Query String Parameters，如下圖所示
服務端成功接受到了參數，圖片正常刪除，伊萬卡小妹臉上又有了笑容，連看我的眼神也更堅定了，好像再說這個男人沒錯。我知道我們的革命友誼又升華了。我對尹萬卡小妹露出了無產階級標志性笑容?
在伊萬卡小妹問出“為什么”三個字時，我趕緊跑回了工位。
Bug是流動的
不由人的
何必激動着要理由
擴展：
有興趣的同學請自行了解以下異步請求格式區別，要知道前方有個伊萬卡小妹妹在等你解答呢，還不滾去學習。
前端：
Request Payload
Form Data
Query String Parameters
后端：
@RequestParam
@RequestBody