摘要：在開(kāi)發(fā)中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要定義規(guī)范統(tǒng)一的接口，如何定義呢方法可能不只一種，本文使用進(jìn)行接口的統(tǒng)一管理本文使用生成的項(xiàng)目舉例舉例拿的官網(wǎng)簡(jiǎn)單舉個(gè)例子，先看一下官網(wǎng)看下網(wǎng)站，腦補(bǔ)一下后臺(tái)給出的文檔，如果后臺(tái)不傻的

在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è)人信息模塊

用戶登錄注冊(cè)模塊

...還有其他很多

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

那么如何做呢？

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

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

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

資訊模塊： info.js

登錄注冊(cè)模塊: member.js

個(gè)人信息模塊 user_info.js

....

cd apis #切換到apis目錄
touch info.js member.js user_info.js #新建js文件

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

src
    apis
        info.js
        member.js
        user_info.js
    main.js

第三步，需要引入axios做相應(yīng)的配置

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

touch 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 用于定義用戶的登錄、注冊(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

這樣定義接口雖然看起來(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/user_info.js"  //用戶信息
import {GET_CURRENT_INFO,GET_HOT_INFO} from "apis/info.js" //熱門(mén)資訊 最新資訊
import {GET_HOT_LECTRUE} from"apis/lectrue.js" //講座推薦

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

//user_info.js用戶信息頁(yè)面
import {GET_USER_INFO} from "apis/user_info.js"  //用戶信息

就先寫(xiě)到這里了，如有錯(cuò)誤，請(qǐng)?jiān)谠u(píng)論區(qū)指正，下次整理下用戶權(quán)限相關(guān)的內(nèi)容，包括jwt,token保存和更新,頁(yè)面權(quán)限問(wèn)題