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