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