春節(jié)臨近，祝大家新年快樂(lè)，豬事順利，2019就是盤(pán)它~

在vue開(kāi)發(fā)中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要定義規(guī)范統(tǒng)一的接口，如何定義呢？

方法可能不只一種，本文使用axios+async/await進(jìn)行接口的統(tǒng)一管理。

本文使用vue-cli生成的項(xiàng)目舉例。

舉例

拿segmentfault的官網(wǎng)簡(jiǎn)單舉個(gè)例子，先看一下官網(wǎng)：

舉例

看下網(wǎng)站，腦補(bǔ)一下后臺(tái)給出的文檔，如果后臺(tái)不傻的話給出的文檔肯定分模塊的，假設(shè)后臺(tái)給出的文檔分為了以下幾個(gè)模塊（假設(shè)的，不要較真哈）：

• 資訊模塊 (我的訂閱、熱門(mén)資訊)
• 問(wèn)答模塊
• 專(zhuān)欄模塊
• 講堂模塊
• 圈子模塊
• 發(fā)現(xiàn)模塊
• 個(gè)人信息模塊
• 用戶(hù)登錄注冊(cè)模塊
• ...還有其他很多

一般來(lái)說(shuō)，網(wǎng)站的首頁(yè)都是復(fù)雜的，會(huì)用到很多其他頁(yè)面也會(huì)用到的api，所以接口統(tǒng)一管理可以做到api的復(fù)用：

模塊劃分

那么如何做呢？

動(dòng)手

第一步

在src目錄下新建一個(gè)文件夾，我這里叫apis，后臺(tái)提供的所有接口都在這里定義：

cd src  // 切換到src目錄
mkdir apis  // 新建apis文件

第二步

按照后臺(tái)文檔劃分的模塊新建js文件,這里簡(jiǎn)單舉個(gè)例子：

• 資訊模塊: info.js
• 登錄注冊(cè)模塊: member.js
• 個(gè)人信息模塊: userInfo.js
• ....

cd apis // 切換到apis目錄
type NUL > info.js // 新建js文件
type NUL > member.js 
type NUL > userInfo.js 

現(xiàn)在的目錄大概是這個(gè)樣子：

src
    apis
        info.js
        member.js
        userInfo.js
    main.js

第三步

需要引入axios做相應(yīng)的配置。
在apis下新建一個(gè)文件夾，叫http.js，在里面做axios相應(yīng)的配置。

type NUL > http.js // 新建http.js文件

配置如下：

 import axios from 'axios'
 // 創(chuàng)建axios的一個(gè)實(shí)例 
 var instance = axios.create({
    baseURL: xxx,
    timeout: 6000
 })
 // 一、請(qǐng)求攔截器 忽略
 instance.interceptors.request.use(function (config) {
    return config;
 }, function (error) {
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(error);
 });
 // 二、響應(yīng)攔截器 忽略
 instance.interceptors.response.use(function (response) {
    return response.data;
 }, function (error) {
    // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
    return Promise.reject(error);
 });
 export default function (method, url, data = null) {
    method = method.toLowerCase();
    if (method === 'post') {
        return instance.post(url, data);
    } else if (method === 'get') {
       return instance.get(url, {params: data});
    } else if (method === 'delete') {
        return instance.delete(url, {params: data});
    } else if (method === 'put') {
        return instance.put(url, data);
    } else {
        console.error('未知的method' + method);
        return false;
    }
}

配置簡(jiǎn)要說(shuō)明一下：

• 引入axios，新建了個(gè)axios的實(shí)例（axios的實(shí)例的axios的功能一樣）。
• 請(qǐng)求攔截器響應(yīng)攔截器不是本文重點(diǎn)，略過(guò)。
• 第30行代碼及以后是重點(diǎn)，拉出來(lái)重點(diǎn)看一下。

 /**
 * 使用es6的export default導(dǎo)出了一個(gè)函數(shù)，導(dǎo)出的函數(shù)代替axios去幫我們請(qǐng)求數(shù)據(jù)，
 * 函數(shù)的參數(shù)及返回值如下：
 * @param {String} method  請(qǐng)求的方法：get、post、delete、put
 * @param {String} url     請(qǐng)求的url:
 * @param {Object} data    請(qǐng)求的參數(shù)
 * @returns {Promise}     返回一個(gè)promise對(duì)象，其實(shí)就相當(dāng)于axios請(qǐng)求數(shù)據(jù)的返回值
 */
 export default function (method, url, data = null) {
    method = method.toLowerCase();
    if (method === 'post') {
        return instance.post(url, data);
    } else if (method === 'get') {
        return instance.get(url, {params: data});
    } else if (method === 'delete') {
        return instance.delete(url, {params: data});
    } else if (method === 'put') {
        return instance.put(url, data);
    } else {
        console.error('未知的method' + method);
        return false;
    }
}

第四步

在apis下面的js文件中引入 http.js導(dǎo)出的函數(shù)，拿其中一個(gè)文件 member.js說(shuō)明：

 // member.js 用于定義用戶(hù)的登錄、注冊(cè)、注銷(xiāo)等
 import req from './http.js'
 // 定義接口  
 // 在這里定義了一個(gè)登陸的接口，把登陸的接口暴露出去給組件使用
 export const LOGIN = params => req('post', '/operator/login', params);
 // 這里使用了箭頭函數(shù)，轉(zhuǎn)換一下寫(xiě)法：
 //export const LOGIN=function(req){
 //    return req('post','/operator/login',params)
 //}
 // 定義注冊(cè)接口
 export const REG = params => req('post', '/operator/reg', params);
 // 定義注銷(xiāo)接口
 export const LOGOUT = params => req('post', '/operator/logout', params);

第五步

在組件中使用接口。
登陸組件 Login.js使用登錄接口：

 //Login.vue
 <template>
    <div>
        <input type='text' v-model='user.userId'>
        <input type='text' v-model='user.pass'>
    </div>
 </template>
 <script>
    // 1. 引入登錄的接口定義
    import {LOGIN} from '../../apis/user.js'
    export default {
        data () {
            return {
                user: {
                    userId: '',
                    pass: ''
                }
            }
        },
        methods: {
          // 2. 定義登錄的邏輯
          async login () {
            // 2.1 awiat LOGIN(this.user) 
              // 等待LOGIN(this.user)執(zhí)行完,
              // 把返回值給userInfo
            let userInfo = await LOGIN(this.user);
            // 2.2假設(shè)登錄成功,返回的數(shù)據(jù)應(yīng)該是 
                // userInfo = {code:200, msg: 'success', data: {token:'xxxxx'}}
                // 然后根據(jù)返回的數(shù)據(jù)做相應(yīng)的處理，比如儲(chǔ)存token
          } 
        },
        mounted () {
            //3. 執(zhí)行登錄
            this.login();
        }
    }
</script>

第六步

這樣定義接口雖然看起來(lái)麻煩點(diǎn)，但有以下幾個(gè)好處：

• 代碼看起來(lái)規(guī)范，所有的接口都在一個(gè)文件夾定義，不用分散的各個(gè)組件，維護(hù)起來(lái)簡(jiǎn)單，例如后臺(tái)的一些url變了，改起來(lái)也方便。
• 可以做到接口一次定義，到處使用。

例如首頁(yè)使用了很多api：

 // index.js  首頁(yè)的js文件
 import {GET_USER_INFO} from 'apis/userInfo.js'  // 用戶(hù)信息
 import {GET_CURRENT_INFO, GET_HOT_INFO} from 'apis/info.js' // 熱門(mén)資訊 最新資訊
 import {GET_HOT_LECTRUE} from 'apis/lectrue.js' // 講座推薦

用戶(hù)界面也會(huì)用到用戶(hù)信息api：

 // userInfo.js用戶(hù)信息頁(yè)面
 import {GET_USER_INFO} from 'apis/userInfo.js'  // 用戶(hù)信息

關(guān)注公眾號(hào)【grain先森】，回復(fù)關(guān)鍵詞 【18福利】，獲取為你準(zhǔn)備的年終福利，更多關(guān)鍵詞玩法期待你的探索~