在vue專案中，對axios進行的封裝

2021-09-25 18:55:47 字數 1560 閱讀 2295

由於專案需求，對axios進行了封裝。

//引入axios


import axios from


'axios'


let cancel ,promisearr =


const canceltoken = axios.canceltoken;


//請求***


axios.interceptors.request.


use(config =>


else


return config


}, error =>


)//響應***


axios.interceptors.response.


use(response =>


, error =>


) 


axios.defaults.baseurl =


'/api'


//設定預設請求頭


axios.defaults.headers =


axios.defaults.timeout =


10000


export


default)}


).then


(res =>)}


)},//post請求


post


(url,param))}


).then


(res =>)}


)}}
1、為防止發起請求時，當前正在進行的相同請求，在請求***中加入了hash判斷，將相同請求url攔截。

2、將axios中get，post公共配置抽離出來。

axios.defaults.baseurl =


'/api'


//設定預設請求頭


axios.defaults.headers =


axios.defaults.timeout =


10000
3、get，post請求的封裝可能你會問，這裡的axios返回的就是promise物件，為什麼還要再次對get,post封裝一次promise.因為我這邊的話，在開發中使用async await會出現資料請求失敗的情況，報的錯就是返回的不是promise物件。(ps：可async await返回的就是promise呀,這個問題後續再搞一下)就直接return了乙個promise物件，以避免上面的錯誤。下面是請求介面的乙個例子：

import req from


'../api/requesttype'


/** * 拼團詳情


*/export


const


groupdetail


= param =>
下面是資料的獲取

async


getdata()


const res =


await


grouplist


(params)


}
到這裡我們就簡單的封裝了一下適合自己專案的axios。

vue專案中對axios的封裝

一 安裝npm install axios二 引入 一般我會在src目錄上建立乙個network資料夾 network資料夾中建立乙個config.js 用來封裝axios 和乙個api.js 用來統一管理介面 三 config.js 中配置axios 引入axios import axios fr...

vue 專案中對 axios的封裝

axios是乙個輕量的http客戶端。基於xmlhttprequest服務來執行http請求，支援豐富的配置，支援promise，支援瀏覽器端和node.js端。自vue2.0起，尤大宣布取消對vue resource的官方推薦，轉而推薦axios。現在axios已經成為大部分vue開發者的首選 特...

vue專案中對axios的全域性封裝

專案中介面會很多，個人喜歡建立api檔案對請求統一管理 1.新建api資料夾，資料夾下建立 axios.js，login.js 2.axios.js import axios from axios import router from router 引入路由是為了做重定向，比如沒有登入過期定向到登入...