用了好久的vue-resource，好像每一次使用的時候，都要去看一下上一次是怎么寫的，具體的語法過不了多久又忘記了，甚至不知道其中的原理，只知道一些簡單的使用，一會兒用ES6的語法，一會兒又用傳統的語法，為了改變這種不良的習慣，并理清vue-resource使用promise取數據的原理，今天把這一塊整理一下。
先來說說 vue-resource
vue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發起請求并處理響應。也就是說，$.ajax能做的事情，vue-resource插件一樣也能做到，而且vue-resource的API更為簡潔。
vue-resource的優勢和介紹，可以通過下面這個地址來了解。
vue-resource的API分別有以下這些：
我現在的工作中，常用的就是get和post。
引入vue-resource后，可以基于全局的Vue對象使用http，也可以基于某個Vue實例使用http。現在的項目中，基本上都是后者，因此在不同組件的beforeCreate或mounted鉤子中取。
// 基于全局Vue對象使用httpVue.http.get('/someUrl', [options]).then(successCallback, errorCallback);Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);// 在一個Vue實例內使用$httpthis.$http.get('/someUrl', [options]).then(successCallback, errorCallback);this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);在發送請求后，使用then方法來處理響應結果，then方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。
vue-resource支持Promise API，Promise是ES6的特性，Promise的中文含義為“先知”，Promise對象用于異步計算。
再簡單介紹一下Promise對象
ES6原生提供了Promise對象。所謂Promise對象，就是代表了未來某個將要發生的事件（通常是一個異步操作）。它的好處在于，有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象還提供了一整套完整的接口，使得可以更加容易地控制異步操作。Promise對象的概念的詳細解釋，請參考《JavaScript標準參考教程》。
ES6的Promise對象是一個構造函數，用來生成Promise實例。下面是Promise對象的基本用法。
var promise = new Promise(function(resolve, reject) { if (/* 異步操作成功 */){ resolve(value); } else { reject(error); }});promise.then(function(value) { // success}, function(value) { // failure});下面我們來直接使用：
假如我們請求下面這個json文件：
// 請求成功{ "code": 0, "msg": "get member success", "content": { "plank_id": "1", "start_at": "1234567890", "status": "3", "members_num": 1, "members": [ { "id": "14", "name": "", "avatar": "", "status": "3" } ] }, "is_mobile_user": false, "jssdk": { "appId": "wxec4d172a4f73ee6f", "timestamp": "1490367697", "nonceStr": "58d534d1b536a", "signature": "d8d8ceb0f39ddeb3085fd197e5df5caddb1f1ba1" }}// 請求失敗{ "code": 1, "msg": "錯誤信息", "content": "", "is_mobile_user": true, "jssdk": { "appId": "wxec4d172a4f73ee6f", "timestamp": "1487750749", "nonceStr": "58ad465dd5ba5", "signature": "4aa01f5a89ce79ee4c53249e0cdb84800f841004" }}get 傳統的寫法
import {MessageBox} from 'mint-ui';this.$http.get(dataUrl) .then(function (response) { // 請求成功 let data = response.data; if (data.code === 0) { this.content = data.content; // 取到數據 } else { MessageBox('提示', data.msg); } }, function (response) { // 請求失敗 MessageBox('提示', response.data.msg); })get ES6的語法 直接用解構賦值和剪頭函數的方式
import {MessageBox} from 'mint-ui';this.$http.get(dataUrl) .then(({data:{code, content, jssdk, msg}}) => { // 請求成功 if (data.code === 0) { this.content = content; // 取到數據 } else { MessageBox('提示', msg); } }, ({data:{msg}}) => { // 請求失敗 MessageBox('提示',msg); });post 傳統的語法
let group_id = this.$route.params.id;let data = { group_id: group_id, mobile: this.mobile, code: this.smsCode, name: this.memberName};import {MessageBox} from 'mint-ui';this.$http.post(checkUrl, data) .then(function (response) { // 請求成功 let data = response.data; if (data.code === 0) { this.content = data.content; // 取到數據 } else { MessageBox('提示', data.msg); }}, function (response) { // 請求失敗 MessageBox('提示', response.data.msg);});post ES6的語法，直接用解構賦值和剪頭函數的方式
let group_id = this.$route.params.id;let data = { group_id: group_id, mobile: this.mobile, code: this.smsCode, name: this.memberName};import {MessageBox} from 'mint-ui';this.$http.post(checkUrl, data) .then(({data:{code, content, jssdk, msg}}) => { // 請求成功 if (code === 0) { this.content = content; // 取到數據 } else { MessageBox('提示', msg); }}, ({data:{msg}}) => { // 請求失敗 MessageBox('提示',msg);});使用解構賦值和剪頭函數可以讓代碼更簡潔，使用起來更方便，我們在{data:{code, content, jssdk, msg}}中的數據，實際上是JS引擎把promise給你的參數結構了，因此，你可以直接取到。
需要注意的是，第一個“MessageBox('提示', msg);”中的msg和第二個“MessageBox('提示',msg);”中的msg不是同一個，第一個是成功的msg，第二個是失敗的msg。
將post請求方式改成get請求方式的語法（一）
拼接一個參數：
const checkUrl = 'plank-show/start?start_at=' + (new Date()).valueOf();this.$http.get(checkUrl) .then(({data:{code, content, jssdk, msg}}) => { if (code == 0) { MessageBox('提示', msg); } else { MessageBox('提示', msg); } }, ({data:{msg}}) => { MessageBox('提示', msg); });將post請求方式改成get請求方式的語法（二）
拼接多個參數：
let queryData = this.$route.query;let dataUrl = "member/coach?group_id=" + queryData.my_group_id + "&id=" + queryData.cheer_id;this.$http.get(dataUrl) .then(({data:{code, content, jssdk, msg}}) => { if (code === 0) { this.content = content; } else { MessageBox('提示', msg) } }, ({data:{msg}}) => { MessageBox('提示', msg); });以上這些，基本上夠我現在在項目中使用，使用多次之后，會發現將 vue-resource、promise、ES6語法結合使用，真的很簡單很清淅，在以后的工作中，如果遇到了其他的需求，再補上整理后內容。
希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
