vue2.0 axios post請求傳參問題（ajax請求）

多毛大叔愛蘿莉發表於2018-07-24
原文網址 : https://juejin.im/post/5b57221051882562552995fa
VueiOS

最近需要做一個專案用vue，由於之前沒接觸過所以也想挑戰下，我不會撘專案，果斷選擇網上現成搭好的專案。最後我們選擇了vue-element-admin網上專案地址放這裡

axios post請求問題

專案中用的ajax請求是 axios

廢話不多說直接上 axios中文文件 我建議在做專案之前先看一下文件，因為說實話這個文件不是太難，先自己吃一下看看能不能嚥下去。

我自己在做專案的時候（後端PHP）發現一個問題 Content-Type: application/x-www-form-urlencoded;charset=UTF-8 設定成form了但是後端還接受不到資料。

請求的配置 但是發現傳的引數全在key上邊:

請求

後端幫我們列印的接收引數(沒有接收到):

後端列印

去百度了一下才明白 : axios預設傳送資料時，資料格式是Request Payload，並非我們常用的Form Data格式，所以引數必須要以鍵值對形式傳遞，不能以json形式傳參

傳參方法
  1. 使用transformRequest，在請求傳送前將請求資料進行轉換
  2. 如果使用模組化開發，可以使用qs模組進行轉換
  3. new URLSearchParams()
第一種方法解決：
// 這是我建立的 axios例項 
const service = axios.create({
  // 自己的專案配置
  baseURL: 'http://www.management.com/',
  timeout: 30000,
  method: 'post',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  // 請求預處理函式 可以把你傳的param進行處理
  transformRequest: [
    data => {
	  // data 就是你post請求傳的值
	  // 一下主要是吧資料拼接成 類似get格式
      let params = ''
      for (var index in data) {
        params += index + '=' + data[index] + '&'
      }
      return params
    }
  ]
})
複製程式碼

上面的 transformRequest 主要就是把值處理成如下格式：

vue2.0 axios post請求傳參問題（ajax請求）

這樣子我們在發一次請求：

vue2.0 axios post請求傳參問題（ajax請求）

vue2.0 axios post請求傳參問題（ajax請求）
後端接收到了 這是第一種解決辦法（本人專案就是用的這種方法。但是後來忘記是什麼原因了 還是使用了第二種方法）

第二種方法解決：

尷尬的事情，由於第一種結局方法後端能接收到，但是不好處理，所以我最後還是使用了 qs 這種辦法。（這種辦法方便明瞭，極力推薦使用這個方法）

var qs = require('qs');
axios.post('/demo', qs.stringify({ 'params': 7758521 }, { indices: false }))
複製程式碼

qs功能請參考 自行參考

第三種方法解決：
var params = new URLSearchParams();
params.append('user', 'value1');
params.append('name', 'value2');
axios.post('/demo', params);
複製程式碼

請參考 new URLSearchParams() 詳細說明文件

以上就是post傳參遇到的問題。參考部落格 blog.csdn.net/call_me_fly… www.cnblogs.com/yulingjia/p…

相關文章