春節(jié)臨近竖般，祝大家新年快樂日戈，豬事順利，2019就是盤它~

在vue開發(fā)中总放，會涉及到很多接口的處理侄非，當項目足夠大時俯画，就需要定義規(guī)范統(tǒng)一的接口溉卓，如何定義呢铜异？

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

本文使用vue-cli生成的項目舉例小腊。

舉例

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

舉例

看下網(wǎng)站溃卡，腦補一下后臺給出的文檔溢豆，如果后臺不傻的話給出的文檔肯定分模塊的蜒简，假設(shè)后臺給出的文檔分為了以下幾個模塊（假設(shè)的瘸羡，不要較真哈）：

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

一般來說搓茬，網(wǎng)站的首頁都是復雜的犹赖，會用到很多其他頁面也會用到的api，所以接口統(tǒng)一管理可以做到api的復用：

模塊劃分

那么如何做呢卷仑？

動手

第一步

在src目錄下新建一個文件夾峻村，我這里叫apis，后臺提供的所有接口都在這里定義：

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

第二步

按照后臺文檔劃分的模塊新建js文件,這里簡單舉個例子：

• 資訊模塊: info.js
• 登錄注冊模塊: member.js
• 個人信息模塊: userInfo.js
• ....

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

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

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

第三步

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

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

配置如下：

 import axios from 'axios'
 // 創(chuàng)建axios的一個實例 
 var instance = axios.create({
    baseURL: xxx,
    timeout: 6000
 })
 // 一张肾、請求攔截器 忽略
 instance.interceptors.request.use(function (config) {
    return config;
 }, function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
 });
 // 二、響應(yīng)攔截器 忽略
 instance.interceptors.response.use(function (response) {
    return response.data;
 }, function (error) {
    // 對響應(yīng)錯誤做點什么
    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;
    }
}

配置簡要說明一下：

• 引入axios锚扎，新建了個axios的實例（axios的實例的axios的功能一樣）吞瞪。
• 請求攔截器響應(yīng)攔截器不是本文重點，略過驾孔。
• 第30行代碼及以后是重點芍秆，拉出來重點看一下。

 /**
 * 使用es6的export default導出了一個函數(shù)翠勉，導出的函數(shù)代替axios去幫我們請求數(shù)據(jù)妖啥，
 * 函數(shù)的參數(shù)及返回值如下：
 * @param {String} method  請求的方法：get、post对碌、delete迹栓、put
 * @param {String} url     請求的url:
 * @param {Object} data    請求的參數(shù)
 * @returns {Promise}     返回一個promise對象，其實就相當于axios請求數(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導出的函數(shù)，拿其中一個文件 member.js說明：

 // member.js 用于定義用戶的登錄克伊、注冊酥郭、注銷等
 import req from './http.js'
 // 定義接口  
 // 在這里定義了一個登陸的接口，把登陸的接口暴露出去給組件使用
 export const LOGIN = params => req('post', '/operator/login', params);
 // 這里使用了箭頭函數(shù)愿吹，轉(zhuǎn)換一下寫法：
 //export const LOGIN=function(req){
 //    return req('post','/operator/login',params)
 //}
 // 定義注冊接口
 export const REG = params => req('post', '/operator/reg', params);
 // 定義注銷接口
 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)的處理，比如儲存token
          } 
        },
        mounted () {
            //3. 執(zhí)行登錄
            this.login();
        }
    }
</script>

第六步

這樣定義接口雖然看起來麻煩點犁跪，但有以下幾個好處：

• 代碼看起來規(guī)范椿息，所有的接口都在一個文件夾定義，不用分散的各個組件坷衍，維護起來簡單寝优，例如后臺的一些url變了，改起來也方便枫耳。
• 可以做到接口一次定義乏矾，到處使用。

例如首頁使用了很多api：

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

用戶界面也會用到用戶信息api：

 // userInfo.js用戶信息頁面
 import {GET_USER_INFO} from 'apis/userInfo.js'  // 用戶信息

關(guān)注公眾號【grain先森】迁杨，回復關(guān)鍵詞 【18福利】钻心，獲取為你準備的年終福利，更多關(guān)鍵詞玩法期待你的探索~