最近在做項(xiàng)目，用axios向后臺發(fā)送post請求，具體的寫法參照官方文檔的寫法：

// 發(fā)送 POST 請求
axios({
  method: 'post',
  url: ‘http://127.0.0.1:3000/login'
  data: {
    username: admin,
    password: admin
  }
}).then((value)=>{
	console.log(value)
})
.catch(reason=>{console.log(reason)});

我發(fā)現(xiàn)，其實(shí)后臺是接收到了post請求，但是一直無法解析我傳過去的參數(shù)，而且我嘗試用postman測試了一下接口，用postman時(shí)可以正確傳參的，同時(shí)，我在后臺打印了一下傳過去的參數(shù)，發(fā)現(xiàn)username和password都是undefined，說明是我傳參的方式出了問題。

找了很久都沒有找到原因，然后我查閱了下網(wǎng)上資料，把傳參改成了以下格式：

        let param = new URLSearchParams()
        param.append('username', 'admin')
        param.append('password','admin')
        axios({
            method: 'post',
            url: "http://127.0.0.1:3000/login",
            data: param
        })
            .then((result) => { console.log(result) })
            .catch((reason) => { console.log(reason) })
    };

這個(gè)時(shí)候，發(fā)現(xiàn)后臺已經(jīng)可以接收到參數(shù)了。

查閱了下文檔，發(fā)現(xiàn)：

• axios的get請求都是把參數(shù)放在params屬性下，在post請求下有兩種方法，一種是放在params屬性中，適合傳參較少且數(shù)據(jù)較簡單的情況，另外一種是放在data屬性中，如果傳參中含有引號、等號、拼接的json串或傳參的數(shù)據(jù)量較大時(shí)候使用；
• 源碼是這樣的：

//如果是帶&&的參數(shù)的格式轉(zhuǎn)成String
if(utils.isURLSearchParams(data){ 
  setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded'); 
  return data.tostring(); 
} 
//如果是object對象轉(zhuǎn)成json格式
if(utils.isObject(data){ 
  setContentTypeIfUnset(headers, 'application/json;charset=utf-8'); 
  return JSON.stringfy(data); 
}

• 我想起之前后臺的服務(wù)器的配置，node后臺一般會(huì)配置中間件解析數(shù)據(jù)，包含兩種方式：

app.use(express.urlencoded({extended: true})) // 請求體參數(shù)是: name=tom&pwd=123

app.use(express.json()) // 請求體參數(shù)是json結(jié)構(gòu): {name: tom, pwd: 123}

看到這里就豁然開朗了，post請求的兩種數(shù)據(jù)格式要和后臺的解析方式相對應(yīng)，如果后臺固定了，就可以通過前端js代碼對數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換

這個(gè)bug當(dāng)時(shí)找了蠻久，關(guān)鍵是要知道出錯(cuò)的根本原因，才知道后面遇到類似的問題如果解決。文章來源地址http://www.zghlxwxcb.cn/news/detail-518090.html

到了這里，關(guān)于axios中post請求后臺接收不到參數(shù)的解釋的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！