關於在vue中使用axios所遇到的問題及解決方法

在最近的乙個專案裡使用axios的post請求後端資料時候出錯，開啟控制台看到，

後端同學告訴我，這個介面是很早以前就開發出來並且使用很久了的，傳參不能是json格式，必須是&a=b&c=d拼接在介面後面攜帶的形式，可能改成get請求就可以。。。

那麼我試著將post方式改成get方式，果不其然，資料請求到了。

但我並不明白其中的緣由，畢竟關於介面的事，對前端來說是神奇的東西，它像條繩子一樣，繩子的另一端是怎麼回事就真的不清楚了，我只在使用node結合mongodb業餘做專案學習的時候寫過所謂的資料介面，但關於格式什麼的概念也不怎麼記得了。

然後我突發奇想，我偏要使用post的方式來請求呢？

既然只需要拼接在介面後面，我就將引數如此拼接：

const query = 'productid=abc&channelcode=123';

axios.post('/api/product?' + query ).then(....)

神奇的是，竟然同樣成功了。。。。

後各種查詢，找到了乙個叫做urlsearchparams的方法可以解決上面手動拼接引數的問題，使用方法如下：

let params = new

urlsearchparams();
axios.post('/api/product' , params).then(....)

urlsearchparam例項出的params會自動作為引數攜帶在url後面，最終效果同上面手動拼接一樣一樣。

至此，雖然解決了一根筋要使用post的問題，但其實真正的解決方案應當是知其所以然的，這樣才算心裡有底。

這兩個方法只是停留在投巧的層面。真正的問題在axios內部實現ajax的原理上關於content-type的配置裡。而且在使用axios時是提供配置這個選項的，只是頗為麻煩，暫不考慮這種。

VUE中使用axios做ajax請求

vue2.0之後，就不再對vue resource更新，而是推薦使用axios 1.安裝 axios npm install axios或 bower install axios2.在要使用的檔案中引入axios import axios from axios 3.使用axios做請求 可以通過向a...

axios在vue中的使用

axios的安裝與配置 使用 npm npm install axios使用script匯入 在vue cli中使用 import axios from axios 在原型上定義方法，就可以在元件的methods中寫this.http 這個 http名字可以自己自定義，但注意不要重複衝突 vue.p...

vue專案中使用axios傳送請求

在src下新建乙個server的資料夾，資料夾中的檔案是server.js檔案 server.js檔案中寫 import from element ui let baseurl if process.env.node env development else else catch v from se...