好的架構封裝，不僅可以加快開發的速度，還能使得邏輯更加簡明，不用關心內部的實現。在此介紹一下vue-resource基于es6出來的神器promise的封裝處理。

首先抽出一個baseHttp.js，用于處理vue-resource的方法調用

import Vue from 'vue'
let vue = new Vue()

//GET請求,將url和請求參數傳入，通過Promise，將成功和失敗的數據派發出去
export function getHttp(url, params) {
  return new Promise((resolve, reject) => {
    vue
      .$http({
        url: url,
        params: params,
        method: 'GET'
      })
      .then(response => {
        resolve(response.body)
      }, response => {      
        reject(response.bodyText)
      })
  })
}

//POST請求，將url,請求參數和body傳入，通過Promise，將成功和失敗的數據派發出去
export function postHttp(url, params, body) {
  return new Promise((resolve, reject) => {
    vue
      .$http({
        url: url,
        params: params,
        body: JSON.stringify(body),
        method: 'POST'
      })
      .then(response => {
        resolve(response.body)
      }, response => {
        reject(response.bodyText)
      })
  })
}

核心部分已經講完了，就是這么簡單。

然后寫一個net.js，用于處理需要的請求處理

Examples

import {getHttp, postHttp} from './basehttp'

/**
  *  GET請求
  *  請求url為app/user/{user_id}?aaaa=1234
 **/
export function getUserInfo(userId) {
  let url = 'app/user/{user_id}'
  let params = {
    user_id: userId,
    aaaa: 1234
  }
  return getHttp(url, params)
}


/**
 * POST請求
 * 請求app/user/query/{user_id}?aaaa=1234
 * 請求body { serverId: String,  scope: String }
 */
export function postUserInfo(userId, serverId, scope) {
  let url = 'app/user/query/{user_id}'
  let params = {
    user_id: userId,
    aaaa: 1234
  }
  let body = {
    serverId: serverId,
    scope: 'personal'
  }
  return postHttp(url, params, body)
}

調用

經過封裝后，調用就變得非常簡單了

import * as http from '../../api/net'

//getUserInfo調用
http.getUserInfo(userId)
  .then(response => {
           //成功處理
         }, reject => {
           //失敗處理
         })

//postUserInfo
http.postUserInfo(userId, serverId, scope)
  .then(response => {
           //成功處理
         }, reject => {
           //失敗處理
         })