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