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][/code]的

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 地址

完