Vue中的vue-resource
阿新 • • 發佈：2018-12-18
- 版本：
vue-resource v1.2.1 - 作用：
Vue與後臺Api進行互動通常是利用vue-resource來實現的，本質上vue-resource是通過http來完成AJAX請求相應的。
- 用法：
Vue例項物件註冊this.$http服務，可以傳送HTTP請求。解析請求所返回的結果。此外，Vue例項將會自定繫結到this所在的回撥函式中。
{ // GET /someUrl this.$http.get('/someUrl').then(response => { // success callback }, response => { // error callback }); }
快捷方法列表
get(url, [config])head(url, [config])delete(url, [config])jsonp(url, [config])post(url, [body], [config])put(url, [body], [config])patch(url, [body], [config])
配置資訊命令
| 引數 | 型別 | 描述 |
|---|---|---|
| url | string |
傳送URL請求 |
| body | Object，FormData，string |
作為請求主體傳送的資料 |
| headers | Object |
將作為HTTP請求標頭髮送的Headers物件 |
| params | Object |
要作為URL引數傳送的引數物件 |
| method | string |
HTTP方法(例如GET、POST、…) |
| responseType | string |
響應主體的型別(例如文字、blob、json、…) |
| timeout | number |
請求超時(以毫秒為單位)(0表示沒有超時) |
| credentials | boolean |
指示是否應該使用憑據發出跨站點訪問控制請求 |
| emulateHTTP | boolean |
使用HTTP POST傳送PUT、PATCH和DELETE請求，並設定X-HTTP-Method-Override標頭 |
| before | function(request) |
回撥函式，用於在傳送請求物件之前修改它 |
| uploadProgress | function(event) |
處理上傳程序的回撥函式 |
| downloadProgress | function(event) |
回撥函式來處理下載的進度 |
響應
| 屬性 | 型別 | 描述 |
|---|---|---|
| url | string |
返回原始的URL |
| body | Object, Blob, string |
響應體 |
| headers | Header |
響應頭物件 |
| ok | boolean |
HTTP狀態碼在200到299之間 |
| status | number |
HTTP狀態碼的響應 |
| statusText | string |
響應的HTTP狀態文字 |
| 方法 | 型別 | 描述 |
| text() | Promise |
將主體解析為字串 |
| json() | Promise |
將主體解析為解析的JSON物件 |
| blob() | Promise |
將主體解析為Blob物件 |
原始碼
下面我將以get請求訪問json檔案的方式來展示vue-resource的用法。
html中的原始碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item.name}}</li>
</ul>
<button @click="getData">get請求</button>
</div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script src="../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
list:[]
}
,methods:{
getData(){
var url = '../json/get.json';
this.$http.get(url).then(function(res){
var body = res.body;
if(body.status){
alert('請求出錯！');
}
this.list = body.message;
});
}
}
});
</script>
</body>
</html>
json檔案中的原始碼
{
"status":0
,"message":[
{
"id":1
,"name":"張三"
}
,{
"id":2
,"name":"李四"
}
]
}
結果
分析
上面的程式碼實現的功能是在頁面中通過點選button按鈕來觸發一個getData的click響應事件，而該事件實現的功能是傳送一個url請求（儘管說其請求的是本地的json檔案資料，不過其請求後臺的方法和該方法是一模一樣的，所以說其用於請求後臺的資料也是同樣的用法。），該請求返回url連結所響應的資料。而該返回資料將會在then()回撥函式中進行相應的處理，比如說我們的json檔案中就返回了status響應狀態碼，其中0代表成功，否則失敗。而一旦響應成功，則呼叫body.message，將相應的資料主體繫結到data資料域中的list中，由於list中的資料有變動，因而Vue會自定的重新整理li的v-for中的頁面資訊，進而完成頁面資訊的更新操作。