上一章我們詳解了專案的架構目錄，這一章主要學習對介面的封裝。

網路請求封裝是每個前端專案必不可少的一項，有利於方便統一管理，比如在請求頭統一加上後臺校驗資料，這樣就沒必要在每個介面中都寫一遍了嘛，這也是面向物件程式設計的一個好的提現。

我們這次選用的是axios外掛，這個外掛優點還是蠻多的，支援promise，可以攔截請求和攔截響應，客戶端支援防禦XSRF攻擊等等，那麼我們就開始吧。

一、安裝axios

老規矩，在控制檯中輸入：

npm install axios -S

二、對axiaos做封裝

我們在request目錄的index.js檔案中，

匯入axiaos外掛，主角。

匯入用到的element-ui中的Message彈窗元件，主要用作提示報錯，如：介面請求報錯了，可以在響應攔截中彈窗提示相應資訊。

匯入store，用於設定全域性的狀態管理，比如常用到的使用者資訊，站點管理這些。

匯入auth，封裝有獲取token方法的外掛，如：獲取瀏覽器快取中的token資訊。

匯入路由router，用於路由跳轉，如：後臺返回登入資訊過期，那麼我們在請求響應攔截捕獲到了，然後我們就可以直接做路由跳轉到登入頁面了。

並寫入相應的請求攔截和響應攔截。

import axios from 'axios'
import { Message } from 'element-ui' //element彈窗
import store from '@/store' //登入資訊
import { getToken } from '@/utils/helper/auth.js' //
 
獲取token
import Router from '@/router/index.js' //路由物件

const service = axios.create({
    timeout: 10000,
})

// request interceptor
//請求攔截
service.interceptors.request.use(
    (config) => {
        //header存放token-一般介面要求
        config.headers['token'] = getToken()
        //設定請求介面
        service.prototype.requestUrl = config.url
        
 
return config
    },
    (error) => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

// response interceptor
//響應攔截
service.interceptors.response.use(
    /**
     * 這裡會返回http請求的資訊，如資料、狀態碼
     */
    (data) => {
        data = data.data
        let res = {}

        if (data.code == '0') {
            console.log('介面請求資料正常')
        } else if (data.code == 201 || data.code == '9001') {
            Message({
                message: '賬號資訊已過期，請重新登入',
                type: 'warning',
            })
            //清空使用者資訊
            store.commit('user/logout')
            Router.push({ path: '/login' })
        } else {
            Message({
                message: data.msg,
                type: 'error',
            })
        }

        // 處理返回格式-自定義返回所有資料或資料包裹指定資料
        // eslint-disable-next-line no-prototype-builtins
        if (data.hasOwnProperty('data') && data.data != null && !data.total && service.prototype.requestUrl.indexOf('auth') == -1) {
            res = data.data
        } else {
            res = data
        }

        return res
    },
    (error) => {
        console.log('err' + error) // for debug
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000,
        })
        return Promise.reject(error)
    }
)

export default service

加好上面的內容後，補充一下需要匯入的內容。在utils資料夾下建立helper資料夾，然後新建auth.js檔案，加入下面獲取token的方法。

utils/helper/auth.js內容：

const TokenKey = 'token'

export function getToken() {
  return localStorage.getItem(TokenKey)
}

export function setToken(token) {
  return localStorage.setItem(TokenKey, token)
}

export function removeToken() {
  return localStorage.removeItem(TokenKey)
}

補充一下store中的內容：

store/modules/user.js內容：

export default {
    namespaced: true,
    state: {
        userInfo: {
            id: null,
            account: '',
            realName: '',
            companies: '',
            sites: null,
        },
    },
    mutations: {
        setUserInfo(state, param) {
            state.userInfo = param
        },
        logout(state, param) {
            state.userInfo = param
        },
    },
}

補充好上面的內容後，然後做一下全域性配置，這樣可以在vue檔案中通過this呼叫了。

三、全域性配置

api目錄下建立index.js檔案

匯入Vue，通過原型繼承，實現全域性註冊。

匯入string的toLowerCaseBar，這個方法是用來將小寫駝峰的字串轉成小寫橫杆的字串，比如：getDataApi轉成get-data-api，主要的作用是做一個請求方法的統一管理。

並寫入下面內容：

import Vue from 'vue'
import { toLowerCaseBar } from '@/utils/helper/string.js' // 格式（小寫駝峰）轉 格式（小寫橫槓）

/**
 * 頁面呼叫API目錄方法
 * @func ajax
 * @param {String} route 請求路徑
 * @param {Object} param 介面引數
 */
const ajax = (route, param) => {
    let arr = route.split('/') // 目錄 -> 檔案 -> 方法
    // 獲取組s件
    let components = require('./' + toLowerCaseBar(arr[0]) + '/' + toLowerCaseBar(arr[1]) + '.js')[arr[2]]
    return components(param)
}

/**
 * 頁面呼叫API目錄方法
 * @func ajax
 * @param {String} route 請求路徑
 * @param {Object} param 介面引數
 */
Vue.prototype.$ajax = ajax

export default ajax

補充一下上述匯入的string.js檔案，同樣在utils資料夾下的helper資料夾，建立string.js，為啥叫string.js呢？

主要類似一個類吧，主要應用於字串型別的操作，字串擷取，字串轉換等等。

然後新增以下程式碼：

/**
 * 格式（小寫駝峰）轉 格式（小寫橫槓）
 * @func toLowerCaseBar
 */
export const toLowerCaseBar = (data) => {
    let res = ''

    if (data) {
        res = data.replace(/[A-Z]/g, (item) => `-${item.toLowerCase()}`)
    }

    return res
}

封裝的工作做好了，然後在main.js檔案中做一下全域性匯入，通過import 匯入api下的index.js檔案即可。

....
import 'element-ui/lib/theme-chalk/index.css' //樣式檔案一定要引入

import './api/index.js'
//載入路由
....

簡單寫一個請求資料的方法，在api資料夾下建立login資料夾，然後在login資料夾下建立auth-api.js，新增下面內容：

匯入request，前面封裝的網路請求方法

匯入url，全域性配置檔案中的請求域。

import request from '@/utils/request/index.js'
import url from '@/config/config.index.js'

/**
 * @description 登入
 * @param {JSON} param
 * @returns
 */
export const loginApi = (param) => {
    return request({
        method: 'post', // 請求方式： GET、POST
        url: url[0] + '/login',
        data: param, // 請求引數
    }).then((res) => {
        return new Promise((resolve) => {
            resolve(res)
        })
    })
}

然後我們在App.vue中新增一個點選方法，用作調起請求用的。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <el-button type="primary" @click="getData">測試按鈕</el-button>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
      getData() {
          this.$ajax('login/authApi/loginApi', {}).then(res => {
              console.log(res)
          }).catch(rej => {
              console.log(rej)
          })
      }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 點選測試按鈕，就可以正常呼叫網路請求的方法。

本章內容就到這裡結束吧，下一章為大家講一下如何去實現許可權管理。