課程
/前端開發
/Vue.js
/axios在vue中的使用
老師,因為我這邊是有添加了ESLint,一直報這個錯。需要怎么解決
2020-03-27
源自:axios在vue中的使用 4-10
正在回答
import?axios?from?'axios'
import?service?from?'./contactApi'
import?{?Toast?}?from?'vant'
//?service?循環遍歷輸出不同的請求方法
let?instance?=?axios.create({
????baseURL:?'http://localhost:9000/api',
????timeout:?1000
})
//?包裹請求方法的容器
const?Http?=?{}
//?請求格式/參數的統一
for(let?key?in?service){
????let?api?=?service[key]?//?url?methods
????//?async作用:避免進入回調地獄
????Http[key]?=?async?function(
????????params,?//請求參數??get:?url,?put,?post,?patch(data),?delete:url
????????isFormData?=?false,?//標識是否是forrm-data請求
????????config={}?//配置參數
????){
????????let?newParams?=?{}?
????????//?content-type?是否是form-data的判斷
????????if(params?&&?isFormData){
????????????newParams?=?new?FormData()
????????????for(let?i?in?params){
????????????????newParams.append(i,?params[i])
????????????}
????????}else?{
????????????newParams?=?params
????????}
????????//?不同請求的判斷
????????let?response?=?{}?//請求的返回值
????????if(api.method?===?'put'?||?api.method?===?'post'?||?api.method?===?'patch'){
????????????try{
????????????????response?=?await?instance[api.method](api.url,?newParams,?config)
????????????}catch(err){
????????????????response?=?err
????????}else?if(api.method?===?'delete'?||?api.method?===?'get'){
????????????config.params?=?newParams
????????????????response?=?await?instance[api.method](api.url,?config)
????????return?response?//返回響應值
????????//?let?res?=?null
????????//?try{
????????//?????res?=?await?axios.get('url')?//?異步函數
????????//?}catch(err){
????????//?????res?=?err
????????//?}
????????//?let?res2?=?await?axios.get('url')
????}
}
//?添加請求攔截器
instance.interceptors.request.use(config=>{
????//?發起請求前
????Toast.loading({
????????mask:?false,?//?是否有陰影
????????duration:?0,?//持續時間,?0一直展示
????????forbidClick:?true,?//禁止點擊
????????message:?'正在加載...'
????})
????return?config
},()=>{
????//?請求錯誤
????Toast.clear()
????Toast('請求錯誤,請稍候重試')
//?添加響應攔截器
instance.interceptors.response.use(res=>{
????return?res.data
},?()=>{
export?default?Http
舉報
本課程介紹了如何在vue項目中優雅的使用Axios。
1 回答源碼的問題
1 回答aixo實例的問題
2 回答axios實例的問題
1 回答多個請求的loading問題
1 回答關于router.js配置的問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2020-05-05
import?axios?from?'axios'
import?service?from?'./contactApi'
import?{?Toast?}?from?'vant'
//?service?循環遍歷輸出不同的請求方法
let?instance?=?axios.create({
????baseURL:?'http://localhost:9000/api',
????timeout:?1000
})
//?包裹請求方法的容器
const?Http?=?{}
//?請求格式/參數的統一
for(let?key?in?service){
????let?api?=?service[key]?//?url?methods
????//?async作用:避免進入回調地獄
????Http[key]?=?async?function(
????????params,?//請求參數??get:?url,?put,?post,?patch(data),?delete:url
????????isFormData?=?false,?//標識是否是forrm-data請求
????????config={}?//配置參數
????){
????????let?newParams?=?{}?
????????//?content-type?是否是form-data的判斷
????????if(params?&&?isFormData){
????????????newParams?=?new?FormData()
????????????for(let?i?in?params){
????????????????newParams.append(i,?params[i])
????????????}
????????}else?{
????????????newParams?=?params
????????}
????????//?不同請求的判斷
????????let?response?=?{}?//請求的返回值
????????if(api.method?===?'put'?||?api.method?===?'post'?||?api.method?===?'patch'){
????????????try{
????????????????response?=?await?instance[api.method](api.url,?newParams,?config)
????????????}catch(err){
????????????????response?=?err
????????????}
????????}else?if(api.method?===?'delete'?||?api.method?===?'get'){
????????????config.params?=?newParams
????????????try{
????????????????response?=?await?instance[api.method](api.url,?config)
????????????}catch(err){
????????????????response?=?err
????????????}
????????}
????????return?response?//返回響應值
????????//?let?res?=?null
????????//?try{
????????//?????res?=?await?axios.get('url')?//?異步函數
????????//?}catch(err){
????????//?????res?=?err
????????//?}
????????//?let?res2?=?await?axios.get('url')
????}
}
//?添加請求攔截器
instance.interceptors.request.use(config=>{
????//?發起請求前
????Toast.loading({
????????mask:?false,?//?是否有陰影
????????duration:?0,?//持續時間,?0一直展示
????????forbidClick:?true,?//禁止點擊
????????message:?'正在加載...'
????})
????return?config
},()=>{
????//?請求錯誤
????Toast.clear()
????Toast('請求錯誤,請稍候重試')
})
//?添加響應攔截器
instance.interceptors.response.use(res=>{
????Toast.clear()
????return?res.data
},?()=>{
????Toast.clear()
????Toast('請求錯誤,請稍候重試')
})
export?default?Http