axios封裝和api介面管理

2021-10-24 13:07:08 字數 1341 閱讀 7086

axios封裝和api介面管理都是為了幫我們簡化**和後期維護的方便。

這次就說說axios的封裝和api介面。

然後開始設定預設的路徑:

// 當環境切換時改變axios的預設路徑

if(process.env.

node_env

=='development'

)else

if(process.env.

node_env

=='production'

)

axios.defaults.timeout =

5000

;

一般來說都是設定三到五秒,看專案需求,這裡我設定的是五秒,之後開始設定請求攔截和響應攔截:

// 請求攔截和響應攔截

axios.interceptors.request.

use(

config =>

//在這裡設定請求時需要攜帶的資訊

return config

});axios.interceptors.responce.

use(

response =>

, error =>})

;

// 使用promise返回axios請求的結果  (返回的是promise)

export

function

get(url,params)).

then

(res=>).

catch

(err=>)}

)}export

function

post

(url,params)).

catch

(err=>)}

)}

別忘記使用export丟擲。因為get和post這兩種請求方法的格式都差不多,我就不多說了。

在api.js檔案中引入http.js檔案的get和post方法:

;//傳參的請求

export

function

getclassify

(id)

export

function

postcourseoutline

(id)

//不傳參的請求

export

function()

export

function()

之後就可以有條有理的寫請求了。

Vue專案api管理以及axios封裝請求

在平常開發中我們需要很多的網路請求,有的同乙個頁面有多個請求,在介面眾多情況下api管理愈發困難,維護及其不方便,下面我根據axios研究出乙個api管理方案,話不多說開始 ctrl v 開始之前需要安裝axios 專案根目錄命令列輸入 npm install axios s目錄結構為 src sr...

框架 axios封裝(介面)

1.統一請求方式,方便介面的取用和閱讀 2.簡化請求的 量,減少重複 冗餘 3.介面 4.方便修改 1.設計圖和專案功能 2.後端寫介面 3.提供前端介面 2.前端寫頁面 3.寫功能 4.虛擬介面資料測試功能 5根據真實介面調整前端介面資料 import axios from axios impor...

封裝API介面

封裝api介面 目的 為了以後修改介面方便,如果專案很大,在每乙個頁面裡修改介面的話,很麻煩,所以封裝在乙個檔案裡,找起來也很方便 如何封裝 1.在src下建乙個restful資料夾,在此下面建乙個api.js檔案 2.因為上面的介面位址寫的是 api 所以要在config資料夾下的index.js...