axios全局loading与实例loading

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()
		}
      ...
  }
)