框架 axios封裝(介面)

2021-10-11 04:17:41 字數 1875 閱讀 2654

1.統一請求方式,方便介面的取用和閱讀

2.簡化請求的**量,減少重複**冗餘

3.介面**

4.方便修改

1.設計圖和專案功能->2.後端寫介面 ->3.提供前端介面 - ↓

->2.前端寫頁面->3.寫功能->4.虛擬介面資料測試功能->5根據真實介面調整前端介面資料

import axios from

'axios'

import store from

'@/core/store'

letapi

=(options, filter)

=>

else

}//請求攔截,返回虛擬資料

if(options.vres)

//建立自定義請求例項

const instance = axios.

create()

;//請求***

instance.interceptors.request.

use(

(config)

=>

) config.baseurl = process.env.

node_env

==='production'

?"/quiz"

:"/"

return config;})

;// 響應***

instance.interceptors.response.

use(

(response)

=>

,(error)

=>);

return

instance

(options);}

export

default

api

1.請求攔截

用於請求傳送之前,處理請求的引數,多用於請求許可權如token,cookie等的設定,請求位址的設定等

2.響應攔截

用於返回資料的處理

3.返回資料處理

原本返回資料處理理應放到第二項的【響應攔截】,但是實際開發中,前後端是並行開發,所以為了方便除錯介面和功能,前端自行設定設定虛擬資料,但是響應攔截是介面實際請求後返回才觸發,因此在使用虛擬資料的時候就失去了作用,因此單獨封裝,保證虛擬資料和真實資料有一樣的處理流程

import

apifrom

'request'

//引用封裝的介面

export

const

textapi=(

)=>)}

/* 這裡可以在引數上傳前進行處理或驗證

*/return

api.

request(,

vres:}}

,data=>)}

)}

介面使用示例

import

from

'@/config/data.js'

export

default

textapi

(p).

then

(data=>).

catch

(error=>)}

)}}}

大部分介面報錯有返回處理提醒,那麼是不是在介面封裝的時候就可以將報錯的**封裝進去,以減少頁面**

根據錯誤型別有1.前端邏輯報錯 2.前端流程報錯 3.後端伺服器報錯

1類和3類屬於開發bug報錯,一般正式專案中不予考慮

2類為資料驗證不通過的主動報錯處理,需要考慮不同介面的呼叫,需要有開關

drf框架和axios封裝

djangorestframework框架,簡稱drf 方便快捷的 進行 web api 的開發 也就是說 方便 我們進行 restful 風格介面開發 乙個介面對應著 get post put delete pip install djangorestframeworkfrom rest fram...

Axios封裝請求後端介面

官方文件位址axios 安裝axios npm install axios在main.js中新增 import axios from axios vue.prototype.axios axios newvue 在src中新建乙個axios資料夾,建乙個http.js檔案 dialog為vant元件...

vue封裝axios介面請求

home.vue home getverytakeinformation get非攜參請求資料 button gettakeinformation get攜參請求資料 button postdata post攜參請求資料 button div template import from request...