好的架構(gòu)封裝，不僅可以加快開(kāi)發(fā)的速度，還能使得邏輯更加簡(jiǎn)明捞慌，不用關(guān)心內(nèi)部的實(shí)現(xiàn)。在此介紹一下vue-resource基于es6出來(lái)的神器promise的封裝處理柬批。
首先抽出一個(gè)baseHttp.js啸澡，用于處理vue-resource的方法調(diào)用
import Vue from 'vue'
let vue = new Vue()
//GET請(qǐng)求,將url和請(qǐng)求參數(shù)傳入，通過(guò)Promise氮帐，將成功和失敗的數(shù)據(jù)派發(fā)出去
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請(qǐng)求嗅虏，將url,請(qǐng)求參數(shù)和body傳入，通過(guò)Promise上沐，將成功和失敗的數(shù)據(jù)派發(fā)出去
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)
})
})
}
核心部分已經(jīng)講完了皮服，就是這么簡(jiǎn)單。
然后寫一個(gè)net.js，用于處理需要的請(qǐng)求處理
Examples
import {getHttp, postHttp} from './basehttp'
/**
* GET請(qǐng)求
* 請(qǐng)求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請(qǐng)求
* 請(qǐng)求app/user/query/{user_id}?aaaa=1234
* 請(qǐng)求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)
}
調(diào)用
經(jīng)過(guò)封裝后龄广，調(diào)用就變得非常簡(jiǎn)單了
import * as http from '../../api/net'
//getUserInfo調(diào)用
http.getUserInfo(userId)
.then(response => {
//成功處理
}, reject => {
//失敗處理
})
//postUserInfo
http.postUserInfo(userId, serverId, scope)
.then(response => {
//成功處理
}, reject => {
//失敗處理
})
