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