基于vue-resource的网络层封装

好的架构封装，不只能够加快开发的速度，还能使得逻辑更加简明，不用关心内部的实现。在此介绍一下vue-resource基于es6出来的神器promise的封装处理。(如今vue-resource官方已经再也不维护，推荐使用axios，固然axios也能够这样作相似处理）

首先抽出一个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 => {
           //失败处理
         })
复制代码