快捷導(dǎo)航

詳解vue使用$http服務(wù)端收不到參數(shù)

更新時(shí)間：2019年04月19日 16:59:55 作者：李古拉雷

這篇文章主要介紹了vue使用$http服務(wù)端收不到參數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

老夫子我正在憋方案書，聽到身后傳來細(xì)軟的聲音：“李哥，我這有個(gè)Bug調(diào)了很長時(shí)間了，您能幫我看一下嗎？”。說這話的是我的好朋友，公司新來的前端小妹伊萬卡。我起身向她走去，看到因長時(shí)間調(diào)試Bug漂亮的臉蛋上泛起的紅暈，原來人會(huì)變的溫柔，一點(diǎn)都不像我。
“
我使用vue中的http方法異步刪除一個(gè)圖片，后端怎么也接收不到我發(fā)的參數(shù)，同時(shí)還報(bào)個(gè)500。
”
聽完伊萬卡小妹描述的這個(gè)Bug臨床表現(xiàn)，根據(jù)我多年的行醫(yī)經(jīng)驗(yàn)，已大體猜出病灶所在。但我并不想這么快結(jié)束這次義診，你們是了解我的,讓她透徹的懂了，才是我的選擇。
老夫整理下外套，端莊的坐在了小妹的工位上，開始我的治病救人過程：望、聞、問、切。

一：望

在瀏覽器中把這個(gè)功能跑一下，打開調(diào)試窗口，找到這個(gè)XHR（XMLHttpRequest）請(qǐng)求連接，看Headers選項(xiàng)卡最下面，如下圖所示

Request Payload，請(qǐng)注意這個(gè)數(shù)據(jù)格式。

二：聞

打開伊萬卡小妹寫的代碼，我終于看出了傳說中詩的感覺，同樣26個(gè)字母，小妹敲出來的就是好看。

this.$vux.confirm.show({
title: "提示",
content: "確定要?jiǎng)h除此圖片嗎？",
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 => {});
}
});

我發(fā)誓，以上代碼絕對(duì)出自伊萬卡之手，分毫未改。但當(dāng)這個(gè)片段出現(xiàn)在我博文里時(shí)屁感覺沒有，你說奇怪不奇怪。

三：問

我轉(zhuǎn)頭看向?qū)慾ava的川普，說：“小川，把你和伊萬卡小妹對(duì)接的這個(gè)接口，代碼發(fā)我一下”。5秒中之后，我收到了如下毫無美感的代碼。

@RequestMapping(value = "/delBelowImg")
@Transactional
public void delBelowFile(@RequestParam Map<String, Object> params,HttpServletRequest request){
try {
……
} catch (Exception e) {
……
} 
}

@RequestParam 注意這個(gè)注解。

四：切

到這里我已經(jīng)確切的知道了病因，我略作分析，在望環(huán)節(jié)，我們看到伊萬卡小妹詩一樣的代碼發(fā)出請(qǐng)求，在瀏覽器發(fā)送請(qǐng)求參數(shù)格式是：
Request Payload，在問環(huán)節(jié)，看到小川寫的代碼，注解是@RequestParam，所以結(jié)果是，小妹發(fā)送的請(qǐng)求數(shù)據(jù)格式與小川的不統(tǒng)一，怪不得接受不到參數(shù)。
我在小妹的代碼基礎(chǔ)上略作改動(dòng)如下（標(biāo)紅是改動(dòng)部分）：

const data = {
file:item.filePath,
id:id,
name:item.name
}
this.$vux.confirm.show({
title: "提示",
content: "確定要?jiǎng)h除此圖片嗎？",
onConfirm() {
that.$http({
method: "post",
url: `${that.$$baseURL}/upload/delBelowImg`,
headers: {
token: token,
'Content-Type':'application/json'
},
params:data
}).then(res => {});
}
});

我再次打開瀏覽器，這次發(fā)送參數(shù)的格式成了 Query String Parameters，如下圖所示

服務(wù)端成功接受到了參數(shù)，圖片正常刪除，伊萬卡小妹臉上又有了笑容，連看我的眼神也更堅(jiān)定了，好像再說這個(gè)男人沒錯(cuò)。我知道我們的革命友誼又升華了。我對(duì)尹萬卡小妹露出了無產(chǎn)階級(jí)標(biāo)志性笑容?

在伊萬卡小妹問出“為什么”三個(gè)字時(shí)，我趕緊跑回了工位。

Bug是流動(dòng)的
不由人的
何必激動(dòng)著要理由

擴(kuò)展：
有興趣的同學(xué)請(qǐng)自行了解以下異步請(qǐng)求格式區(qū)別，要知道前方有個(gè)伊萬卡小妹妹在等你解答呢，還不滾去學(xué)習(xí)。
前端：
Request Payload
Form Data
Query String Parameters
后端：
@RequestParam
@RequestBody

以上所述是小編給大家介紹的vue使用$http服務(wù)端收不到參數(shù)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: