Vue axios封裝請求實現前後端分離

二、封裝axios

總結我們需要進行前後端分離開發，那麼前後端的跨域問題就是無可避免的問題，前後端的請求也是無可避免的，vue開發可以使用乙個請求元件，做到跨域請求，這個元件就是axios，我們可以對axios進行封裝作為我們請求的工具元件

npm install axios;
// 安裝axios
npm install qs;
// 安裝qs,序列化資料

// 在http.js中引入axios
import axios from
'axios'
;// 引入axios
import
qsfrom
'qs'
;// 引入qs模組，用來序列化post型別的資料，後面會提到

一般我會在專案的src目錄中，新建乙個utils資料夾，然後在裡面新建乙個request.js檔案作為封裝的工具類，新建乙個api資料夾，在裡面建乙個api.js檔案用來統一管理我們的介面。

import axios from
'axios'
;// 引入axios
const instance = axios.
create()
export
default instance

我們的專案環境可能有開發環境【dev】、測試環境【】和生產環境【prod】。我們通過node的環境變數來匹配我們的預設的介面url字首。axios.defaults.baseurl可以設定axios的預設請求位址

// 環境的切換
if(process.env.
node_env
=='development'
)else
if(process.env.
node_env
=='debug'
)else
if(process.env.
node_env
=='production'
)

axios.defaults.timeout= 6000

//設定請求超時時間，單位為毫秒

設定預設的post請求頭，當需要使用其他請求頭的時候，可以直接在請求方法之中寫，

axios.defaults.headers.post[
'content-type'
]=

請求攔截是作為我們在傳送請求的時候作為乙個攔截校驗

最常見的就是校驗是否登入

可以搭配vuex進行全域性變數使用

// vuex的路徑根據自己的路徑去寫
import store from
'@/store/index'
;// 請求***
axios.interceptors.request.
use(    
config =>
,    
error =>
)

如果我們的所有請求響應格式是一致的，那麼我們可以根據響應的狀態碼進行響應攔截，最常見的響應攔截就是進行了錯誤的統一處理和沒登入或登入過期後跳轉登入頁的乙個操作。

// 響應***
axios.interceptors.response.
use(    
response =>
else},
// 伺服器狀態碼不是2開頭的的情況
// 這裡可以跟你們的後台開發人員協商好統一的錯誤狀態碼    
// 然後根據返回的狀態碼進行一些操作，例如登入過期提示，錯誤提示等等
// 下面列舉幾個常見的操作，其他需求可自行擴充套件
error =>})
;break
;// 403 token過期
// 登入過期對使用者進行提示
// 清除本地token和清空vuex中token物件
// 跳轉登入頁面                
case
403:
toast()
;// 清除token
localstorage.
removeitem
('token');
store.
commit
('loginsuccess'
,null);
// 跳轉登入頁面，並將要瀏覽的頁面fullpath傳過去，登入成功後跳轉需要訪問的頁面 
settimeout((
)=>})
;},1000);
break
;// 404請求不存在
case
404:
toast()
;break
;// 其他錯誤，直接丟擲錯誤提示
default
://根據你自己的ui元件格式進行丟擲
toast()
;}return promise.
reject
(error.response);}
}});

export

default instence

import request from
'@/utils/request'
// 登入方法【post請求】
export
function
login
(username, password, code, uuid)
return
request()
}// 獲取使用者詳細資訊【get 請求】
export
function
getinfo()
)}

在具體的頁面之中進行匯入api.js檔案的方法進行使用即可

這就是vue中對於axios的初步封裝使用，後續會持續更新

Vue axios封裝請求實現前後端分離

vue axios 請求封裝

封裝vue axios請求

vue axios請求封裝

Vue axios封裝請求實現前後端分離

vue axios 請求封裝

封裝vue axios請求

vue axios請求封裝

相關推薦