Vue-resource主要用來(lái)做Vue應(yīng)用與后端數(shù)據(jù)的交互们何，我們?cè)谑褂脮r(shí)有時(shí)會(huì)要用到Es5的寫(xiě)法惭婿，但由于Es5與Es6的語(yǔ)法原因?qū)е聦?xiě)法各異箕昭，甚至很多教程都迷惑用錯(cuò)彬呻，下面列出幾種常見(jiàn)的用法衣陶，備查。
依賴(lài)：
vue-resource
vue 1.x
官方的Es6標(biāo)準(zhǔn)寫(xiě)法
這是官方標(biāo)準(zhǔn)的Es6的簡(jiǎn)單寫(xiě)法：
<pre>
{
// GET /someUrl
this.$http.get('/someUrl').then((response) => {
// success callback
}, (response) => {
// error callback
});
}
</pre>
不用箭頭函數(shù)的寫(xiě)法：
<pre>
//定義json資源的url
var resource_url = 'http://www.example.com/tweets?q=vuejs&count=10';
//主要代碼區(qū),位于vue實(shí)例的methods代碼段內(nèi)
methods:{
load: function() {
this.$http.get(this.resource_url).then(function(response) {
console.log(response)
}, function(error){
console.log(error)
})
}
}
</pre>
更深入點(diǎn)參看下面
<pre>
{
// POST /someUrl
this.$http.post('/someUrl', {foo: 'bar'}).then((response) => {
// get status
response.status;
// get status text
response.statusText;
// get 'Expires' header
response.headers.get('Expires');
// set data on vm
this.$set('someData', response.body);
}, (response) => {
// error callback
});
}
</pre>
vue-resource Es5的寫(xiě)法
基本用法如下（此處省略了對(duì)于錯(cuò)誤處理）：
<pre>
//定義json資源的url
var apiUri = "http://www.example.com/tweets?q=vuejs&count=10";
{
getPositions: function() {
//get the url
this.$http.get(apiUri + 'pages/?pageid=1&limit=10',function (positions) {
// success callback
this.$set('positions', positions);
console.log(this.positions);
});
}
}
</pre>
一般容易出錯(cuò)的地方主要在關(guān)于錯(cuò)誤處理區(qū)的位置
<pre>
//定義json資源的url
var apiUri = "http://www.example.com/tweets?q=vuejs&count=10";
{
getPositions: function() {
//get the url
this.$http.get(apiUri + 'pages/?pageid=1&limit=10',function (positions) {
// success callback
this.$set('positions', positions);
console.log(this.positions);
}).error(function(data, status, request) {
// error callback
console.log('Fail闸氮，網(wǎng)址或相關(guān)錯(cuò)誤剪况！\n錯(cuò)誤碼：' + status + "\nrequest：" + request);
});
}
}
</pre>
