axios全局loading与实例loading
参考文章:https://blog.csdn.net/qq_40963664/article/details/94554176
何为全局与实例?
文档上的全局指的是在axios中进行配置拦截器,即全局拦截器,并在拦截器中对config进行修改,添加loading效果组件等。
但是
此处要介绍的是,如何在实例中设置一个loading效果,并在其他地方控制效果。即在某些页面需要显示其他不同的loading效果。
config
通过config可以将控制变量传到拦截器中(或者说拦截器可以拦截到config内容并解析)。
例如,我们在login用的是uni-app的全局loading效果,而在其他功能页面用的是专用的页面loading。
这时就需要通过传入一个控制变量来关闭掉全局配置的loading效果。
// 实例化axios
const service = axios.create({
baseURL: 'http://***.***.***.***:****', // 基础请求地址
timeout: 10000 // request timeout
})
// 封装post请求
service.post(url, params, {
headers,
showLoading // 此处即为loading效果的显示控制变量
})
在拦截器中判断
service.interceptors.request.use(
// eslint-disable-next-line arrow-body-style
(config) => {
// 请求发出前做的事
// 请求是否需要loading效果
if (config.showLoading) {
showFullScreenLoading()
}
...
}
)