How does vue change the request interceptor using axios?

/ introduce axios and loading and message components in element ui
import axios from "axios"
import {Loading, Message} from" element-ui"
/ / timeout
axios.defaults.timeout = 5000
/ / http request interceptor
var loadinginstace
axios.interceptors.request.use (config = > {
/ element ui Loading method
loadinginstace = Loading.service ({fullscreen: true})
return config
}, error = > {
loadinginstace.close ()
Message.error ({

) 
message: ""

})
return Promise.reject (error)
})
/ / http response interceptor
axios.interceptors.response.use (data = > {/ / response successfully closed loading
loadinginstace.close ()
return data
}, error = > {
loadinginstace.close ()
Message.error ({

) 
message: ""

})
return Promise.reject (error)
})

export default axios

for example, how can I change the setting of a loading that sometimes doesn"t want to jump out of elementUI?
ask God for advice!

Vue.js javascript
Mar.20,2021

you can add a switch and put it in the global or vue. You can control whether the loading is displayed or not by controlling this switch. 

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

loadinginstace && loadinginstace.close()

this is an axios interceptor, which determines that data will be received only if the status returns 20000300, and the request timeout is 10 seconds. After failure, the next request is automatically launched, with a total of 4 requests

. 
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
// code200
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)
    })
})

Previous: Vue axis proxy request was unsuccessful, cross-domain and reported an error

Next: Can the template string of Es6 be judged by if to dynamically display information?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu