FE - 走向Node与Webpack之路 - Vue 网络层设计

啰嗦

最近简单学习了vue相关知识，其中在开发过程中，数据请求使用的是 axios , 用法已经很简单了。

说说为什么封装网络层：

• 如果需要更换 axios网络请求库，怎么办？
• 可能某个接口需要改变参数顺序？
• 可能某个接口更换地址？
• …..

基于上面原因，需要封装网络层，做到：

• http请求库统一配置
• 返回值回调统一处理
• api 统一管理
• 简易便

网络层设计

配置全局$http , 使用$http.moudle.operation(params,callback) 统一回调

如图所示：

分为 3 层： service 、controller 、http.js

• service ：统一管理api 和 直接进行数据访问
• controller : 数据回调统一处理，返回view统一格式的数据
• http.js ： 统一所有接口操作，方便全局配置
• common : 统一http配置请求对象和数据回调处理函数等

示例

首先 安装 axios ：

npm i axios -D

基本结构：

common

FbHttp.js 网络请求对象

/**
 * Created by yuan on 3/1/2017.
 * (1) parse data
 * (2) http : network error : status -1
 */
import http from 'axios'

// config http
http.defaults.baseURL = 'http://localhost:8080/example'
http.defaults.timeout = 2500
http.defaults.headers.post['Content-Type'] = 'application/json'
// cache-control: "max-age=0, private, must-revalidate"
http.defaults.headers.post['Cache-control'] = 'max-age=5'

export default http

FbResponse.js 返回值统一处理

请求对象进行请求后，返回promiss对象，再次进行callback返回格式为 [code,data]的function.

/**
 * Created by yuan on 3/1/2017.
 */

// 通用返回值处理
export default function FbResponse (promiss, callback) {
  console.log('----------------- http already response : [code,data] => {} --------------------')
  promiss.then(response => {
    console.log('response => ' + response.data)
    return callback([response.status, response.data])
  }).catch(error => {
    if (error.response) {
      return callback([error.response.status, error.response.data])
    } else {
      return callback(['-1', error.message])
    }
  })
}

service : 使用 fbhttp.js 请求对象进行数据请求

doc.js doc相关api统一管理

注意： 若字符串使用${} 则该字符串使用键盘tab键上面的上引号

/**
 * Created by yuan on 3/1/2017.
 * doc api
 */
import http from '../common/FbHttp'

// 创建 doc
function createMakeDoc (data) {
  return http.post('/documents/', data)
}

// 获取 doc list
function getMakeDocList (page, pagesize) {
  return http.get(`/documents?page=${page}&pagesize=${pagesize}`)
}

// 获取 doc obj
function getMakeDocById (id) {
  return http.get(`/documents/${id}`)//这里的引号需要注意tab键上面键的上引号
}

// 更新 doc obj
function updateMakeDoc (id, data) {
  return http.put(`/documents/${id}`, data)
}



export {
  createMakeDoc,
  getMakeDocList,
  getMakeDocById,
  updateMakeDoc
}

controller

docService.js 返回值统一处理，统一回调

/**
 * Created by yuan on 3/1/2017.
 * 处理 doc 文档
 */

import FbResponse from '../common/FbResponse'
import * as doc from '../service/doc'

function createMakeDoc (data, callback) {
  FbResponse(doc.createMakeDoc(data), callback)
}

function getMakeDocsList ({page = 1, pagesize = 10}, callback) {
  FbResponse(doc.getMakeDocList(page, pagesize), callback)
}

function getMakeDocObj ({id = 0}, callback) {
  FbResponse(doc.getMakeDocById(id), callback)
}

function updMakeDocObj ({data = null}, callback) {
  if (data === null) {
    return
  }
  FbResponse(doc.updateMakeDoc(data.id, data), callback)
}

function filterMakeDoc ({page = 1, week = null, userId = null, year = null}, callback) {
  FbResponse(doc.filterMakeDoc([page, week, userId, year]), callback)
}

export {
  createMakeDoc,
  getMakeDocsList,
  getMakeDocObj,
  updMakeDocObj,
  filterMakeDoc
}

http.js : 接口统一 default , 全局使用

http.js

/**
 * Created by yuan on 2/27/2017.
 * http 总入口/出口
 * 导出每个请求模块
 * (1) export default service
 */

// user
import * as user from './controller/userService'
// doc
import * as doc from './controller/docService'

export default {
  user,
  doc
}

配置 vue main.js

main.js

import http from './server/http'

// use http
Vue.prototype.$http = http

use : $http.moudle.operation(params,callback)

使用

this.$http.doc.getMakeDocObj({id: id}, [code,data]=>{
   console.log(code)
   console.log(data)
})

example :

 export default {
    name: 'DocDetail',
    data: function () {
      return {
        markDoc: {
          'content': ''
        }
      }
    },
    created: function () {
      let id = this.$route.params.id
      this.$http.doc.getMakeDocObj({id: id}, this.response)
    },
    methods: {
      response: function ([code, data]) {
        console.log(data)
        if (code === 200) {
          this.markDoc = data
        } else {
          this.showMsg(['error', `network error : status ${code}`])
        }
      },
      showMsg: function ([type, msg]) {
        this.$message({
          message: msg,
          type: type
        })
      }
    }
    }
  }

---

代码 github 地址

完