先看一段代碼：
export default { name: 'app', data() { return { articles: [] } }, created: function() { this.$http.get('/api/user/order/list', { productType: "1", pageNum: 1, pageLimit: 8 }, { headers: { }, emulateJSON: true }).then((response) => { this.articles = response.data.data.list; }).catch(function(response) { console.log(response); }); } }
1、get傳參數的坑：加params對象傳參
調用接口時所傳的參數並沒有傳參成功，后來去網上多方搜查資料，原來get的請求參數需要放在params里面，發現把傳參方式修改成如下形式即可：
{ params: { productType: "1", pageNum: 1, pageLimit: 8 } }
和之前的傳參方式不同，這次我把參數加在了一個名為params的對象中，再次打包后上傳，發現接口調用成功！當然你也可以把參數直接放在url中，也是沒有問題的。
注意：jsonp只支持get，寫法和這個是一樣的。
2、解析返回的數據：獲取到的數據需要JSON.parse()一下
response返回正常，response.data返回正常。
發現vue-resource的GET方法返回的response不僅僅只是單純的數據，而是包含了請求頭信息，數據等等一系列的數據，而vue-response也提供了提取數據的方法：response.json()；但response.json()無法獲取，response.body.data也無法獲取
data返回的就不是JSON格式，而是字符串的格式？於是，我在最開始獲取數據的方式外，加了一層JSON.parse
this.articles = JSON.parse(response.data).data.list;
數據獲取成功。
3、使用post請求：Vue.http.options.emulateJSON = true;
將問題1我們擴展下，使用post請求，發現參數是傳不過去的。這里又要多扯一個知識點：form data 和 request payload。
通過下面2張圖，我們就能看出區別
request payload：
form data：
這兩個本質是發送交易的報文頭中的Content-type，我們都知道一般發請求報文中的特殊字符比如+等都會被轉碼，那是因為默認的Content-Type用的是application/x-www-form-urlencoded，也就是form data這種情況，默認的報文都是這種格式的，但原生ajax就不是，原生ajax報文頭用的是text/plain;charset=UTF-8，在這種格式下大部分字符都是不編碼的。這種差異就會產生一些問題，比如我們碰到的這個post，就是用的第二種方式，所以那邊接不到參數。思路也很簡單，就是改報文頭。
使用時遇到這樣的報錯：XMLHttpRequest cannot load XXX. Response for preflight has invalid HTTP status code 405)；
這個$http請求和jquery的ajax還是有點區別，這里的post的data默認不是以form data的形式，而是request payload。
解決起來倒也很簡單：
（1）在vue實例中添加headers字段：
http: {
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}
（2）或者使用 vue 方面提供的更加簡單做法：
Vue.http.options.emulateJSON = true;
（3）axios請求的解決方法：
//1、vue-resource請求的解決方法
import Vue from "vue" import VueResource from "vue-resource" Vue.use(VueResource) this.$http({ url: "/api/341-1", headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, emulateJSON: true, //以application/x-www-form-urlencoded的請求頭部發送參數
method: "POST", body: { a: "12233", b: "12345" } }).then(reponse => { if (reponse.status == "200") { console.log(response.data); } }) //2、axios請求的解決方法
import Vue from "vue" import axios from "axios" import Qs from "qs" axios({ url: "/api/341-1", headers: { 'Content-Type': 'application/x-www-form-urlencoded', //請求頭部
}, method: "POST", data: Qs.stringify({ a: "12233", b: "12345" }) // 這里可以在發送請求之前對請求數據做處理，比如form-data格式化等，這里可以使用開頭引入的Qs（這個模塊在安裝axios的時候就已經安裝了，不需要另外安裝）
}).then(response => { if (response.status == "200") { console.log(response.data); } })