鍍金池/ 問答/Java  HTML/ axios請求數(shù)據(jù)如下幾種方式的區(qū)別，以及在封裝的axios方法中如何傳遞同第一

axios請求數(shù)據(jù)如下幾種方式的區(qū)別，以及在封裝的axios方法中如何傳遞同第一種情況相同的參數(shù)？

公司現(xiàn)在進(jìn)行前后端分離項(xiàng)目，我前端親求數(shù)據(jù)用的是axios方法，現(xiàn)有如下集中請求接口的數(shù)據(jù)方式，只有第一種和第三種能夠請求成功，但是明顯兩種傳遞的數(shù)據(jù)不一樣，由于自己不是很明白其中的原理，所以在此提問，希望各位大神能指點(diǎn)一二。

登陸接口可以成功請求到數(shù)據(jù)的情況如下：
請求方式：

clipboard.png

請求響應(yīng)：

clipboard.png

請求返回參數(shù)：

clipboard.png

封裝好的axios請求方式的參數(shù)如下：
第一種情況：
調(diào)用封裝的方法如下：

clipboard.png

封裝的方法如下：

clipboard.png

返回的結(jié)果如下，服務(wù)器內(nèi)部報錯，前端傳遞的數(shù)據(jù)格式與成功請求的格式不一致?。?！

clipboard.png

第二種情況：調(diào)用的封裝方法不變，將封裝方法的參數(shù)形式修改，情況如下：

clipboard.png

clipboard.png

第三種情況：

clipboard.png

clipboard.png

回答
編輯回答
薄荷綠

修改下第一種封裝過的方法：

export function login(username, password) {
  return request({
       url: '...',
       method: '...',
       // 代碼區(qū)別在這里
       // axios post請求默認(rèn)的 Content-type 就是 x-www-form-urlencoded,此時是 data 選項(xiàng)
       // 如果是 get 請求的化，就是 params 選項(xiàng)
       data: {
           username,
           password
       } 
   })  
}
2018年9月21日 12:57
編輯回答
未命名

這里成不成功只取決于后端能處理的Content-Type。換個后端哪個對哪個錯就不一定了。

2017年10月24日 23:32