vue專案中對axios的二次封裝

2021-08-20 12:37:05 字數 1338 閱讀 4587

//引入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 => )})}

}

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

將axios中get,post公共配置抽離出來

axios.defaults.baseurl = '/api'

//設定預設請求頭

axios.defaults.headers =

axios.defaults.timeout = 10000

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的二次封裝

vue專案開發時,為了對請求的資料做統一處理,如加loading,以及請求訊息提示提示等,需要對vue配套的axios進行二次封裝 引入axios import axios from axios 使用element ui message做訊息提醒 import from element ui 設定b...

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開發者的首選 特...