你需要了解的前後端傳參

前後端傳參一般有兩種形式：

1. key=value 形式傳參（即 parameter形式）
2. body 形式傳參（傳 json 數據給後端）

key=value 形式傳參

1.如果使用的是 GET 請求，瀏覽器展示的 Request URL 會自動在路徑後面加上 ?a=1&b=2這樣的參數，這就是 key=value 形式傳參, 在控制檯看到的參數形式是“Query String Parameters”，後端解析時是用 querystring.parse 進行處理。

axios 請求示例

import request from 'axios'
        
...

someInterface (params) {
  return request({
    url: '請求路徑',
    method: 'GET',
    params
  })
},

瀏覽器關於 GET 請求的呈現：

2.如果發送 POST 請求，對傳參進行如下處理，則在控制檯看到的參數形式是“Form Data”，而且瀏覽器會自動將 Request Headers 的 Content-Type 設置爲 application/x-www-form-urlencoded, 這種也是 key=value 形式傳參， 後端解析時是用 querystring.parse 進行處理。

處理方式1：

import request from 'axios'
import qs from 'qs'

...

someInterface (params) {
  return request({
    url: '請求路徑',
    method: 'POST',
    data: qs.stringify(params)
  })
},

處理方式2：

import request from 'axios'
import qs from 'qs'

...

someInterface (params) {
  return request({
    url: '請求路徑',
    method: 'POST',
    data: params,
    transformRequest: [(data) => {
      let ret = ''
      for (let it in data) { 
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }]
  })
},

瀏覽器呈現：

body 形式傳參

如果發送 POST、PUT、PATCH 等請求，若 content-type 爲 application/json（使用 axios 發送這些請求時，瀏覽器 Request Headers 的 Content-Type 沒顯示出，則默認爲 application/json），在控制檯中看到的參數形式叫做"Request payload"，後端解析用body-parser來處理

axios 請求示例

import request from 'axios'
    
    ...
    
    someInterface (params) {
      return request({
![clipboard.png](/img/bVbx9Ds)

        url: '請求路徑',
        method: 'POST',
        data: params
      })
    },

瀏覽器呈現：

另外，jquery 的 ajax 請求中當 type 爲 'POST'時，會將 contentType統一處理成: "application/x-www-form-urlencoded; charset=UTF-8",所以使用的是 Form Data 這種傳參形式，我測試時目前沒看到過有 Request payload 這種形式的

總之，method 用 GET 還是 POST 是後端定義好的，前端寫死就好，至於是 key=value 還是 body 形式，要看後端是什麼方式來解析，並非 method 爲 POST, 就一定要用 body 形式，也可以是 key=value 形式。qs.stringify 可以轉化成 key=value 形式（即將參數對象序列化成 URL 的形式，以&進行拼接）。