vue項目接口管理

在vue開發中，會涉及到不少接口的處理，當項目足夠大時，就須要定義規範統一的接口，如何定義呢？

方法可能不僅一種，本文使用axios+async/await進行接口的統一管理

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

舉例

拿segmentfault的官網簡單舉個例子，先看一下官網

看下網站，腦補一下後臺給出的文檔，若是後臺不傻的話給出的文檔確定分模塊的，假設後臺給出的文檔分爲了如下幾個模塊（假設的，不要較真哈）

• 資訊模塊 (個人訂閱、熱門資訊)
• 問答模塊
• 專欄模塊
• 講堂模塊
• 圈子模塊
• 發現模塊
• 我的信息模塊
• 用戶登陸註冊模塊
• ...還有其餘不少

通常來講，網站的首頁都是複雜的，會用到不少其餘頁面也會用到api，因此接口統一管理能夠作到api的複用

那麼如何作呢？

動手

1.

首先，在src目錄下新建一個文件夾，我這裏叫apis，後臺提供的全部接口都在這裏定義

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

2.

第二步，按照後臺文檔劃分的模塊新建js文件,這裏簡單舉個例子

• 資訊模塊： info.js
• 登陸註冊模塊: member.js
• 我的信息模塊 user_info.js
• ....

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

如今的目錄大概是這個樣子

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

3.

第三步，須要引入axios作相應的配置

在apis下新建一個文件夾,叫http.js,在裏面作axios相應的配置

touch http.js //新建http.js文件

配置以下:

import axios from 'axios'

//建立axios的一個實例 
var instance = axios.create({
    baseURL:xxx,
    timeout: 6000
})


//------------------- 1、請求攔截器 忽略
instance.interceptors.request.use(function (config) {

    return config;
}, function (error) {
    // 對請求錯誤作些什麼
    
    return Promise.reject(error);
});

//----------------- 2、響應攔截器 忽略
instance.interceptors.response.use(function (response) {
    
    return response.data;
}, function (error) {
    // 對響應錯誤作點什麼
    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的功能同樣)
• 請求攔截器響應攔截器不是本文重點，略過
• 第30行代碼及之後是重點，拉出來重點看一下

/**
 * 使用es6的export default導出了一個函數，導出的函數代替axios去幫咱們請求數據，
 * 函數的參數及返回值以下：
 * @param {String} method  請求的方法：get、post、delete、put
 * @param {String} url     請求的url:
 * @param {Object} data    請求的參數
 * @returns {Promise}     返回一個promise對象，其實就至關於axios請求數據的返回值
 */
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
    }
}

4.

第四步、在apis下面的js文件中引入http.js導出的函數，拿其中一個文件member.js說明

//member.js 用於定義用戶的登陸、註冊、註銷等

import req from './http.js'

//定義接口  

//在這裏定義了一個登錄的接口，把登錄的接口暴露出去給組件使用
export const LOGIN =params=>req('post','/operator/login',params)
//這裏使用了箭頭函數，轉換一下寫法：
//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)

5.

第五步，在組件中使用接口

登錄組件Login.js使用登陸接口

//Login.vue
<template>
    <div>
        <input type='text' v-modal='user.userId'>
        <input type='text' v-modal='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)執行完,
              //把返回值給user_info
            
            let user_info=await LOGIN(this.user)
            
            //2.2假設登陸成功,返回的數據應該是 
                //user_info={code:200,msg:'success',data:{token:'xxxxx'}}
                //而後根據返回的數據作相應的處理，好比儲存token
            
        } 
        },
        mounted(){
            //3. 執行登陸
            this.login()
        }
    }
</script>

6.

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

• 代碼看起來規範，全部的接口都在一個文件夾定義，不用分散的各個組件，維護起來簡單，例如後臺的一些url變了，改起來也方便
• 能夠作到接口一次定義，處處使用

例如首頁使用了不少api

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

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

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

就先寫到這裏了，若有錯誤，請在評論區指正，下次整理下用戶權限相關的內容，包括jwt,token保存和更新,頁面權限問題