上一篇文章我就簡(jiǎn)單的貼了下代碼，放出來不到一天就破千了，這讓我非常的意外，也很開心;) 我會(huì)好好的把上一篇的代碼注釋補(bǔ)一下的。愛掏網(wǎng) - it200.com然后決定再放一些我的代碼和理解，俗話說：
Talk is cheap, show me the code！
還記得我的架構(gòu)中，只有前端靜態(tài)代碼，同時(shí)所有的請(qǐng)求是經(jīng)過跨域發(fā)到api上的，那么這次，我們就來好好的分析下request接口的實(shí)現(xiàn)和我自己嘗試的一種的開發(fā)流程——api文檔（新接口文檔）
先貼上我之前的前后端分離的方式，再簡(jiǎn)單的介紹下，看過前面文章的同學(xué)直接跳過哈！
看這個(gè)圖，我現(xiàn)在對(duì)web端的開發(fā)，因?yàn)槭怯胿ue寫的，vue本身會(huì)把代碼打包成靜態(tài)文件：
- -static
- -index.html
這樣意味著，用了vue或者類似框架的時(shí)候，我們會(huì)拋棄了以前的一個(gè)東西叫動(dòng)態(tài)web語言，具體點(diǎn)就是說像asp、jsp等，在客戶訪問前會(huì)根據(jù)一些條件渲染出對(duì)應(yīng)的網(wǎng)頁出來，而這正是vue這類型的框架要實(shí)現(xiàn)的功能，嗯，可以說是沖突了。愛掏網(wǎng) - it200.com我當(dāng)時(shí)還會(huì)習(xí)慣性的部署docker容器來存放這些靜態(tài)資源，然后啟動(dòng)一個(gè)node express來監(jiān)聽接口，但后來仔細(xì)想想，這不是像OSS這些要做的事情嗎！？ 所以，就有了前面的兩篇文章：
- [基于阿里的Node全棧之路（三）利用和通數(shù)據(jù)庫(kù)OSS實(shí)現(xiàn)前后端分離
編輯 刪除](https://yq.aliyun.com/articles/216361) - 基于阿里的Node全棧之路（四）前后端分離進(jìn)階-自動(dòng)上傳前端代碼到OSS
嗯嗯，這也是我前后端分離的第一步。愛掏網(wǎng) - it200.com
好，上面都是重新溫故下我之前的文章，因?yàn)槲野l(fā)現(xiàn)看我前面幾篇文章好像并沒有想象中的那么容易閱讀，所以再次重溫一遍。愛掏網(wǎng) - it200.com
敲黑板！敲黑板！
這次，我分享的是我對(duì)api請(qǐng)求接口的封裝，可能很多同學(xué)會(huì)說，這有什么難的，要用請(qǐng)求的時(shí)候，調(diào)用一下ajax什么的就可以了。愛掏網(wǎng) - it200.comemmm...， 是可以的，不過那樣的代碼對(duì)于非常追求代碼美感的我來說，是灰常難忍受的！
既然我們是前后端分離，那么我們應(yīng)該規(guī)對(duì)接的接口的結(jié)構(gòu)，對(duì)吧？我在項(xiàng)目中，強(qiáng)制規(guī)定所有的api都應(yīng)該長(zhǎng)這樣
const api_host = `https://api.${你的域名}\${你的項(xiàng)目名\${api_version}`;//https://api.xxxxx.com/blog/v1
//api遵循restful設(shè)計(jì)，這里規(guī)定api返回結(jié)構(gòu)
const response = {
code:Number,
/*
* 小于0是錯(cuò)誤，這里前端不需要關(guān)心錯(cuò)誤是什么，
* 等于0是沒有權(quán)限
* 大于0表示成功
* 我這么設(shè)計(jì)是由原因的，歡迎大家來一起探討
*/
msg:String,//當(dāng)然，你也可以叫errMsg，message什么的，隨便你啦
/*
* 在我這里，默認(rèn)只有錯(cuò)誤的時(shí)候，才會(huì)出現(xiàn)
*/
data:Object,
/*
* 后端返回對(duì)象，我們一直說前后端語言一樣，有很多好處，吶，這里就是!
* 這樣寫，基本能保證后端傳給前端是什么，前端收到的就是什么
*/
};下面放上我的代碼，然后我再詳細(xì)解析下：
/* eslint-disable */
import axios from 'axios';
const MyPlugin = {};
axios.defaults.withCredentials = true;//唯有加上這句話，才能夠支持跨域請(qǐng)求，如果實(shí)在不明白的可以留言
MyPlugin.install = function install(Vue, api_host) {
//構(gòu)建axios請(qǐng)求基礎(chǔ)
const request = axios.create({
baseURL: api_host,//api host：顧名思義就是api的請(qǐng)求基礎(chǔ)地質(zhì)
timeout: 30000// 超時(shí)時(shí)間
});
//請(qǐng)求方法的構(gòu)建,type為：get、post、delete等等
const createRequestFuc = (type) => {
return function (resource, params, showError = true) {
//返回請(qǐng)求的Promise的對(duì)象
return new Promise((resolve, reject) => {
this.$Loading.start();//請(qǐng)求發(fā)起時(shí)，show loading，一般的框架都會(huì)有全局調(diào)用的loading方法。愛掏網(wǎng) - it200.com
params = type === 'get' ? { params } : params;//axios里get方法和其它方法接收參數(shù)的方式不一致,這里做個(gè)統(tǒng)一
request[type](resource, params)//調(diào)用request
.then(res => {
if (res && res.data && res.data.code > 0) {//判斷請(qǐng)求返回結(jié)果，code為判斷值，這里可以替換成你自己的框架定義
resolve(res.data.data);//返回結(jié)果
} else {
showError && this.$Message.error(res.data.msg);//判斷是否調(diào)用自帶全局waring或error
reject(res.data.msg);//無論上面是否執(zhí)行，都應(yīng)該reject，阻止代碼繼續(xù)執(zhí)行
}
this.$Loading.finish();//結(jié)束loading
})
.catch((err) => {
this.$Message.error('請(qǐng)求失敗！');//這種情況一般是請(qǐng)求失敗，報(bào)錯(cuò)方式可以自己更改
this.$Loading.finish();//結(jié)束loading
reject(err);//無論上面是否執(zhí)行，都應(yīng)該reject，阻止代碼繼續(xù)執(zhí)行
});
//特別注意：vue install方式安裝的插件，this就是vue component對(duì)象。愛掏網(wǎng) - it200.com
});
}
}
//構(gòu)建請(qǐng)求
Vue.prototype.$get = createRequestFuc('get');
Vue.prototype.$put = createRequestFuc('put');
Vue.prototype.$post = createRequestFuc('post');
Vue.prototype.$patch = createRequestFuc('patch');
Vue.prototype.$delete = createRequestFuc('delete');
};
export default MyPlugin;
/* eslint-enable */
這是一個(gè)我寫的插件，上篇文章講到vue項(xiàng)目用webpack模板構(gòu)建對(duì)吧，那么你現(xiàn)在寫前端項(xiàng)目應(yīng)該都是以".vue"結(jié)尾的文件，那么你只需要在main.js里面把它引用進(jìn)來就可以了：
import Vue from 'vue';
import Request from '@/plugins/request';
Vue.use(Vuex);
Vue.use(Request,'https://api.xxxxx.com/v1');//這里
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '',
components: { App },
});
/* eslint-enable no-new */
好，到這里估計(jì)寫過vue的老鳥都已經(jīng)明白了，沒搞懂的童鞋嘞，那就繼續(xù)看下去吧!
接下來，你只需要在vue文件里面直接使用就行了，這里再貼一份簡(jiǎn)單登錄代碼給大家參考：
嘿嘿，上面的代碼簡(jiǎn)單不。愛掏網(wǎng) - it200.com當(dāng)然，你要喜歡promise回調(diào)或者yield都一樣的，隨便你，我這里只是想分享一種思想，因?yàn)檫@種方式，是可以在node里面得到廣泛應(yīng)用的，為了證明這點(diǎn)，我再貼一份我的react-native版本的request接口:
/* eslint-disable */
import axios from 'axios';
import { ShowWarnMsg } from './toast';
const api_host = 'https://api.xxxxxx.com/project_name/v1';
//構(gòu)建axios請(qǐng)求基礎(chǔ)
const request = axios.create({
baseURL: api_host,//api host：顧名思義就是api的請(qǐng)求基礎(chǔ)地質(zhì)
timeout: 30000// 超時(shí)時(shí)間
});
//請(qǐng)求方法的構(gòu)建,type為：get、post、delete等等
const createRequestFuc = (type) => {
return function (resource, params, showError = true) {
//返回請(qǐng)求的Promise的對(duì)象
return new Promise((resolve, reject) => {
params = type === 'get' ? { params } : params;//axios里get方法和其它方法接收參數(shù)的方式不一致,這里做個(gè)統(tǒng)一
request[type](resource, params)//調(diào)用request
.then(res => {
if (res && res.data && res.data.code > 0) {//判斷請(qǐng)求返回結(jié)果，code為判斷值，這里可以替換成你自己的框架定義
resolve(res.data.data);//返回結(jié)果
} else {
showError && ShowWarnMsg(res.data.msg);//判斷是否調(diào)用自帶全局waring或error
reject(res.data.msg);//無論上面是否執(zhí)行，都應(yīng)該reject，阻止代碼繼續(xù)執(zhí)行
}
})
.catch((err) => {
ShowWarnMsg('請(qǐng)求失敗！');//這種情況一般是請(qǐng)求失敗，報(bào)錯(cuò)方式可以自己更改
reject(err);//無論上面是否執(zhí)行，都應(yīng)該reject，阻止代碼繼續(xù)執(zhí)行
});
//特別注意：vue install方式安裝的插件，this就是vue component對(duì)象。愛掏網(wǎng) - it200.com
});
}
};
export const $get = createRequestFuc('get');
export const $put = createRequestFuc('put');
export const $post = createRequestFuc('post');
export const $patch = createRequestFuc('patch');
export const $delete = createRequestFuc('delete');
global.HTTP = {
$get,
$put,
$post,
$patch,
$delete,
};
export default global.HTTP;
/* eslint-enable */
區(qū)別不大吧，別學(xué)我用global，我只是偷懶。愛掏網(wǎng) - it200.com