vue 使用axios怎么更改请求拦截器?

// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
import { Loading, Message } from 'element-ui'
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
// element ui Loading方法
loadinginstace = Loading.service({ fullscreen: true })
return config
}, error => {
loadinginstace.close()
Message.error({

message: '加载超时'

})
return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
loadinginstace.close()
return data
}, error => {
loadinginstace.close()
Message.error({

message: '加载失败'

})
return Promise.reject(error)
})

export default axios

比如这个有时候 不想跳出elementUI 的 loading 要怎么修改设置呢?
求大神指点!!!!

阅读 4k
2 个回答

可以加一个开关,放在全局还是vue哪里,随便你,通过控制这个开关来控制是否显示loading

loadinginstace = showLoading && Loading.service({ fullscreen: true })

loadinginstace && loadinginstace.close()

这是个axios的拦截器,判断只有状态吗返回200~300才会接收数据,而且请求超时时间为10秒,失败后自动发起下一次请求,一共请求4次

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
//axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'
axios.defaults.retry = 4
axios.defaults.timeout = 10000
axios.defaults.withCredentials = true
// code状态码200判断
axios.interceptors.response.use((res) => {
    if(res.status === 654) {
        console.log('请求超时!')
    }
    if(res.data.code < 200 && res.data.code >= 300) {
        console.error('数据返回有误')
        return Promise.reject(res)
    }
    return res
}, (error) => {
    let config = error.config
    if(!config || !config.retry) return Promise.reject(error)
    config.__retryCount = config.__retryCount || 0
    
    if(config.__retryCount >= config.retry) {
        console.log('promise error:' + error)
        return Promise.reject(error)
    }
    config.__retryCount += 1
    let backoff = new Promise(function(resolve) {
        setTimeout(function() {
            resolve()
        }, config.retryDelay || 1)
    })
    
    return backoff.then(function() {
        return axios(config)
    })
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题