基于vue-resource的网络层封装

好的架构封装，不仅可以加快开发的速度，还能使得逻辑更加简明，不用关心内部的实现。在此介绍一下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 => {
           //失败处理
         })

基于vue-resource的网络层封装

推荐阅读更多精彩内容