1. 程式人生 > >axios發起post請求,url後面的參數自動拼接到Request URL上

axios發起post請求,url後面的參數自動拼接到Request URL上

ios params out url參數 err fig 需要 style 所有

最近遇到一個神奇的bug,當通過路由query傳參跳轉到新的頁面時,新頁面請求接口的Request URL後面自動拼接上了query傳參

具體如下:

跳轉路由是這樣的

let path = "********";
this
.$router.push({path:path,query:{keyWord:"零食"}})

跳轉到新的頁面後新頁面所有請求接口的地址

https://api.*********.com/?g=home_v2&m=taobaoInt&a=search&keyWord=零食

默認請求接口的地址

https://api.
*********.com/?g=home_v2&m=taobaoInt&a=search

可以很明顯的看到路由query傳參到的頁面的接口地址被強行增加了keyWord關鍵字,就是這個關鍵字導致接口失效。

經過查看Axios說明文檔發現可以在請求發送之前進行攔截,於是將請求打印出來

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
    // 在發送請求之前做些什麽
    console.log(config);
    return config;
  }, function (error) {
    
// 對請求錯誤做些什麽 return Promise.reject(error); });

經過對比發現query傳值時,請求會自動加上params參數

技術分享圖片

axios默認用get傳值時用params傳參,用post傳值時,用data傳參,就是用post傳值時,url參數影響了請求地址自動加上了params

因此需要在請求開始時做一個攔截就好了

1 apiRequest.interceptors.request.use((request) => {
2     console.log(request);
3     if(request.method == ‘post‘){
4       request.params = {};
5     }
6 return request; 7 });

axios發起post請求,url後面的參數自動拼接到Request URL上