axios put 傳參問題詳解

一、PUT請求介紹

PUT請求是HTTP協議中的一種方法，用於向特定的URL提交更新的內容，比如在RESTful API中常用於更新資源。

二、axios簡介

axios是一種基於Promise的HTTP客戶端，可以用於瀏覽器和Node.js。axios屬於第三方插件，需先安裝後引入使用。

三、axios.put用法

PUT請求的參數可以通過 URL 或者 body 發送，並且 body 參數只可以用 JSON 格式的字符串或 ArrayBuffer，Blob，FormData。

常用的put方法是axios.put(url[, data[, config]])。

其中，url是請求的url地址（必填）；data是請求參數（非必填）；config中可以配置header、timeout等信息（非必填）。

axios.put('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

以上是最基本的使用方法，直接傳遞參數即可。

四、PUT請求傳參問題

在使用axios時，有很多人遇到的問題是PUT請求的參數傳遞不成功。下面分別說明PUT請求時常遇到的兩個問題。

五、問題一、後台無法獲取到參數

出現這個問題的主要原因是參數沒有設置Content-Type，導致後台無法解析傳過去的參數。解決方法為在請求頭裡設置Content-Type為application/json。

axios.put(url, data, {
  headers: {
    "Content-Type": "application/json"
  }
})

在以上格式中，data是請求參數。

六、問題二、參數傳遞為undefined

這個問題的原因是使用了qs.stringify()對參數進行的序列化，但是在PUT和PATCH請求中，使用axios默認的qs.stringify()序列化參數時將把傳入的數據轉換為類似 firstName=John&lastName=Doe 的格式，即 URL 拼接參數。而在後端框架對 PUT 請求的參數解析時只解析 application/json Content-Type，而不會對 URL 拼接參數進行解析，所以後端框架解析到的參數是 undefined。

解決方法也很簡單，只需將data數據類型轉換為application/json Content-Type類型即可。

axios.put(url,JSON.stringify(data),{
    headers: {'Content-Type': 'application/json'}
})

在以上格式中，data是請求參數。

七、總結

本文主要從PUT請求介紹、axios簡介、axios.put用法和PUT請求傳參問題四個方面對axios put傳參問題進行了詳細的闡述，其中解決了常見的兩個傳參問題。