技術概述

在使用axios進行前後端通訊的時候，會有許多重複的程式碼，且介面可能在多處被使用，所以對於介面的封裝非常有必要。這樣在團隊協作的過程中就能有效地控制介面的改變。

技術詳述

axios介面封裝

src/utils/request.js

封裝axios的基礎url以及請求、響應攔截器

import axios from 'axios'
import store from '@/store'
import { Message, MessageBox } from 'element-ui'
import { url } from '@/utils/interface.js'
import { getToken } from '@/utils/auth'

// 1.建立axios例項
const service = axios.create({
  // 公共介面--url = base url + request url
  baseURL: url,
  // 超時時間 單位是ms，這裡設定了5s的超時時間
  timeout: 5 * 1000,

})
// 2.請求攔截器request interceptor
service.interceptors.request.use(
  config => {
    ...
  },
  error => {
    return Promise.reject(error)
  }
)
// 3.響應攔截器response interceptor
service.interceptors.response.use(
  response => {
    ...
  },
  error => {
    return Promise.reject(error)
  }
)
export default service
 

src/api/account.js

引入請求物件，封裝login介面提供其他頁面呼叫

import request from '@/utils/request'

/**
 *@functionName: login 
 *@param:  data 登入表單
 *@description: 使用者名稱密碼登入
*/
export function login(data) {
    return request({
        url: `/account/login/${data.status}`,   //data.status 是否記住密碼 引數
        method: 'post',    //post方法
        data  //post引數
    })
}
/**
 *@functionName: getMailCode 
 *@param:  data 郵箱地址 
 *@description: 獲取郵箱驗證碼
*/
export function getMailCode(params) {
    return request({
        url: '/account/code',
        method: 'get',   //get方法
        params  //get引數
    })
}
 

遇到的問題和解決過程

1. 在請求傳引數的過程中，get請求引數無法正確傳入

   原因：在介面設定的時候，get方法的引數設定錯誤

   export function getMailCode(data) {
       return request({
           url: '/account/code',
           method: 'get',   //get方法
           data  //錯誤引數設定
       })
   }
   
   export function getMailCode(params) {
       return request({
           url: '/account/code',
           method: 'get',   //get方法
           params  //正確get引數
       })
   }
    
   

   因此在設定請求引數的時候要對應好get和post的引數型別

總結

axios是vue上一個與後端通訊非常好用的工具，能夠設定相關攔截器進行對請求和響應的更多高階處理，對axios封裝介面可以使在頁面使用相關介面時更加得受控，同時axios請求是非同步返回的處理方式在結合vue的響應式資料時應該多注意非同步繫結的問題。

參考資料

Springboot+Vue前後端分離多使用者社群專案實戰教程

CSDN上有關axios封裝以及攔截器的教程