vue專案封裝api介面(詳解)

2021-10-24 14:56:46 字數 1129 閱讀 5211

在前端vue的開發中,有一點是必須要做的,那就是將所有的api介面封裝起來,因為從開發到最終上線的過程中,api是需要經常更換的,所以需要將api封裝起來,便於修改和更換。

在所有的api中,每乙個api都會分成兩個部分,比如:這是分成基本路徑和最後的方法兩部分的,一般情況下如果需要更換api的時候,只是更換前半部分,最後的方法是不會改變的。

1.在src目錄下新建乙個api.js檔案,然後在檔案中寫入:

import

from

'element-ui'

//按需引入

// vue.use

//例子(原api介面):

const url =

''//api介面

const api =

//msdid是狀態碼、time時間

const

errormeaage

=function

(msgid,time)

else

if(msgid==

'429'

)else}}

export

default

2.這就封裝完了乙個 api 配置檔案了,然後在呼叫的時候,直接引入即可:

import axios from

"axios"

;import api from

"@/api.js"

;import qs from

"qs"

;//請求方法

getprovincialenterprise()

);//請求引數

var data =

; axios

.post

(api.api.getenterpriseinfo, qs.

stringify

(data)).

then

(function

(response)

else

if(data.code ==

204)})

.catch

(function

(error));

},

vue封裝api介面

在沒有封裝api之前,我們是類似這樣使用 axios 的 this.axios.post blogarticle frontlist parms then resp 封裝之後這樣呼叫 userlist parms then resp 我們先不看具體是怎麼封裝的,但看使用,發現好像寫的 一樣多呢。等你...

vue入門 對vue專案中api介面的封裝管理

很多朋友在開發過程中,習慣性直接將api的呼叫寫在單個元件之中,就直接呼叫請求。例如 在前端專案開發中,從整體架構出發,我們可以將專案中所有api進行封裝,從而便於我們進行統一管理。在src目錄下,新建api資料夾,在api資料夾下建立index.js和api.js。1 api.js。主要用來統一管...

vue專案api介面管理

預設vue專案中已經使用vue cli生成,安裝axios,基於element ui開發,axiosconfig目錄和api目錄是同級,主要記錄配置的相關。import vue from vue import axios from axios import qs from qs import fro...