一開始使用Vue時，我們用axios發(fā)送請求時一般會將api接口直接寫在對應(yīng)的請求方法中，這樣當(dāng)我們項目需要修改請求時我們就需要先去找到當(dāng)前的組件，然后再找到對應(yīng)的事件方法，最后才能將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文件來統(tǒng)一存放api接口，通過expot導(dǎo)出對應(yīng)的接口，然后在用到的組件中引用該接口，這樣當(dāng)我們需要修改接口時只要到api文件中去統(tǒng)一處理即可，也方便我們了解項目中實現(xiàn)了哪些功能，目前這個項目是定義了一個baseURL，然后與接口進(jìn)行拼接生成一個常量api，再將其導(dǎo)出給其他組件調(diào)用。

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

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

如何定義api模塊

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

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

如何使用

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

//引入組件中的方法import {login} from '@/api/api.js'//調(diào)用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)})

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。