vue+axios+eggjs post請求參數問題之萬惡的ctrl+c/v大法

案情

最近呢想用vue+axios+eggjs作一個小東西練練手，碰到一個axios post請求參數沒辦法被後端獲取的問題， 查閱了一下網上的資料呢，解決方法有許多種，固然我得挑選一個最接近本身問題狀況的解決辦法啦；
大都是如下相似的方法：
一、

二、

好吧！既然找到方法了，也是蠻簡單的操做嘛，搞！
如下是個人配置：

ok，調試一下

呵呵~500！難受啊！
如圖所示，報文中請求參數都沒有，什麼鬼啊，看了後臺的日誌發現確實也沒有接收到發送的三個參數

因而又看了幾遍本身的配置文件等等，妹毛病啊~，又去網上一通搜，無果；我又用了postman進行數據請求，發現是沒有問題的，一樣的參數。postman能夠請求成功，後端能夠拿到參數

下面是後臺日誌打印：

這個問題就很刁鑽了啊，因而我把目光放到了請求時參數處理的這個問題上，在以前查詢包括閱覽axios文檔的時候有看到過transformRequest這個方法，主要是對入參作一些轉換處理的；
官方文檔解釋以下：

是的，妹毛病，我在本身的封裝中也用了這個方法，有打印過入參data，發現是結果是我傳入的參數，可是爲何通過qs.stringify方法的處理以後就不行了呢，我對data進行了打印而且打印了它的類型，發現是一個string類型，因而我將其轉換爲object對象格式

通過上述代碼處理。驚奇吧般的發現接口通了，後臺可以獲取到參數了

叼的一~~~~~~~，原來是入參類型變成了string，可是爲何呢，我明明傳的是對象進來的啊

呵呵，對不起，對不起，對不起，浪費你們時間了，我~~尼。。。爲毛有個JSON.stringify(param)！！！！？？？

破案

原來這個方法我是從原先一個項目中拷貝過來的，沒有在乎這裏的細節，當時只想着能發出請求就成了，問題確定在我如今寫的代碼上面，這一折騰，腦袋疼！
最終的實現方案就是

import axios from 'axios'
import Qs from 'qs'

const service = axios.create({
  baseURL: 'http://127.0.0.1:7001',
  timeout: 1000,
  withCredentials: true,
  transformRequest: [function (data) {
    return Qs.stringify(data)
  }],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' // 默認是application/json形式的，須要設置成如今這樣
  }
})
複製代碼

結語

上述只是簡單的記錄了一下本身傻逼的行爲致使自殘的結果，其實中間仍是有不少東西值得研究的，這兒也很少作記錄了，之後有機會再詳細總結，還有要說的就是平時在coding的過程當中不免會碰到類似功能代碼，咱們可能會直接去拷貝使用，提升效率，在實現相應功能以後，可能不會去認真去看看這段代碼的每個屬性、方法是不是當前功能真正須要的，可是若是不在第一時間處理掉這些冗餘的代碼，可能會引起更嚴重的問題，比方說其餘同事也複製了相關的代碼，就像病毒同樣傳遍許多地方，而後相關這一塊的代碼後期就沒辦法維護了，因此不能由於一時的求快，爲了完成而完成，實在不可取，與君共勉