由於專案需求,對axios進行了封裝。
1、為防止發起請求時,當前正在進行的相同請求,在請求***中加入了hash判斷,將相同請求url攔截。//引入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 =>)}
)}}
2、將axios中get,post公共配置抽離出來。
3、get,post請求的封裝可能你會問,這裡的axios返回的就是promise物件,為什麼還要再次對get,post封裝一次promise.因為我這邊的話,在開發中使用async await會出現資料請求失敗的情況,報的錯就是返回的不是promise物件。(ps:可async await返回的就是promise呀,這個問題後續再搞一下)就直接return了乙個promise物件,以避免上面的錯誤。下面是請求介面的乙個例子:axios.defaults.baseurl =
'/api'
//設定預設請求頭
axios.defaults.headers =
axios.defaults.timeout =
10000
下面是資料的獲取import req from
'../api/requesttype'
/** * 拼團詳情
*/export
const
groupdetail
= param =>
到這裡我們就簡單的封裝了一下適合自己專案的axios。async
getdata()
const res =
await
grouplist
(params)
}
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 引入路由是為了做重定向,比如沒有登入過期定向到登入...