一開始使用Vue時，我們用axios發送請求時一般會將api接口直接寫在對應的請求方法中，這樣當我們項目需要修改請求時我們就需要先去找到當前的組件，然后再找到對應的事件方法，最后才能將api修改，這樣維護起來劇會變的很費時費力(特別是接口比較多的時候)。

//舉個栗子this.$axios.post('http://127.0.0.1:8000/login/',{ username:this.uname, password:this.password,}).then(res=>{if(res.status==200){ Message.success('登陸成功') this.$router.push('/')}}).catch(error=>{ Message.error(error)})

隨著適用了Vue，這時我們就會把api提取出來，用一個api.js文件來統一存放api接口，通過expot導出對應的接口，然后在用到的組件中引用該接口，這樣當我們需要修改接口時只要到api文件中去統一處理即可，也方便我們了解項目中實現了哪些功能，目前這個項目是定義了一個baseURL，然后與接口進行拼接生成一個常量api，再將其導出給其他組件調用。

如果你的項目對axios進行了封裝，那么我們這里還可以對api進一步優化，我們可以在封裝的axios設置好基本路由，這樣當我們拿到api后系統會為我們自動拼接路由，同時還可以統一的異常處理方案簡化了每個請求書寫，提高代碼的可讀性。如何封裝axios可以參考文章 Vue實戰037：axios二次封裝和使用，

接下來我們繼續優化api管理，繼續拿我們的登陸接口來解析：http://127.0.0.1:8000/login/ ，這里可以分為4部分，分別是支持的協議(http協議)，ip(127.0.0.1)，端口(8000)，路由(login/)，假設每個api都是從同一臺服務發出的，那么每個接口的協議、ip和端口都是一樣的，這時我們就可以通過axios.defaults.baseURL = 'http://127.0.0.1:8000/'統一指定。

如何定義api模塊

這里我們準備將axios.js引入api.js中，然后調用axios.js中的接口，接口需要提供3個參數，分別是method、url、params，這里可以用箭頭函數，寫起來簡單。這樣我們就定義了一個login方法，只需要傳入method和params參數即可。

import api from '@/api/axios.js'export const login = (method, params) => api(method, 'login/', params)

如何使用

在組件中導入api中的方法，用到哪個導入哪個即可，然后再事件中調用我們的login方法，傳入對應的method和params參數接口，是不是比之前簡單又簡潔了很多，封裝還有 個好處就是可以很好的避開操作token，這樣就不用在每個接口都手動的提交token操作了。

//引入組件中的方法import {login} from '@/api/api.js'//調用login方法，傳入method和params即可login('post',{ username:this.uname, password:this.password,}).then(res=>{ if(res.status==200){ this.$message.success('登陸成功') this.$router.push('/') }}).catch(error=>{ this.$message.error(error)})

歡迎關注本人的公眾號：編程手札，文章也會在公眾號更新

總結

以上是生活随笔為你收集整理的axios请求接口http_Vue实战038：api接口模块化统一管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。