案情

最近呢想用vue+axios+eggjs做一個小東西練練手，碰到一個axios post請求引數沒辦法被後端獲取的問題， 查閱了一下網上的資料呢，解決方法有許多種，當然我得挑選一個最接近自己問題情況的解決辦法啦；
大都是以下類似的方法：
1、

2、

好吧！既然找到方法了，也是蠻簡單的操作嘛，搞！
以下是我的配置：

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的過程中難免會碰到相似功能程式碼，我們可能會直接去拷貝使用，提高效率，在實現相應功能之後，可能不會去認真去看看這段程式碼的每一個屬性、方法是否是當前功能真正需要的，但是如果不在第一時間處理掉這些冗餘的程式碼，可能會引發更嚴重的問題，比方說其他同事也複製了相關的程式碼，就像病毒一樣傳遍許多地方，然後相關這一塊的程式碼後期就沒辦法維護了，所以不能因為一時的求快，為了完成而完成，實在不可取，與君共勉