以服務的方式調用Element的Loading（利用axios的攔截器，在請求的時候加一個Loading，並在響應後將其關閉）

一、 所遇問題

以服務的方式調用Element的Loading，通過target指定了需要覆蓋的DOM節點,無法正常的關閉loading，如圖：

二、解決辦法

可在攔截器調用新的Loading之前檢測是否有實例存在，若存在，將其關閉。例： if (loadingInstance) { loadingInstance.close();}

三、以服務的方式調用Element的Loading完整示例

axios.js文件：

import axios from 'axios'
import qs from 'qs'
import { Message, Loading } from "element-ui";
// axios.defaults.baseURL = 'http://localhost:9999' /*這裏的地址就是剛剛啓起來的服務器地址  */ //遇到上傳圖片等，需在上傳的頁面引入axios單獨處理，重新設置請求頭等

// Loading的option
const options = {
    text: '載入中...',
    background: 'rgba(255,255,255,0.6)',
    spinner: 'el-icon-loading',
    lock: true,
    target: '.right-container' // target指定需要覆蓋的 DOM 節點，會獲取到問的那個中第一個類名爲right-container的元素
}
let loadingInstance;
const baseURL = 'http://localhost:9999';
const config = {
    withCredentials: true,
    baseURL: baseURL, // 這裏的地址就是剛剛啓起來的服務器地址 
    timeout: 2500
}
const urls = ['/banner', '/personalized', '/personalized/privatecontent', '/personalized/newsong'];
const _axios = axios.create(config)

/*請求攔截*/
_axios.interceptors.request.use(
        config => {
            if (config.method === 'post' && !(config.data instanceof FormData)) {
                config.headers = {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
                config.data = qs.stringify(config.data, { arrayFormat: 'repeat' })
            }
            if (loadingInstance) {
                loadingInstance.close(); //因爲option設置了target, 指定target時，每次都創建了一個新的實例,故需在攔截器調用新的Loading之前檢測是否有實例存在，若存在，應將其關閉。
            }
            if (urls.includes(config.url)) {
                loadingInstance = Loading.service(options); // 以服務的方式調用的 Loading
            }

            return config
        }, error => {
            return Promise.reject(error)
        }
    )
    /* 響應攔截 */
_axios.interceptors.response.use(
    res => {
        if (urls.includes(res.config.url)) {
            loadingInstance.close(); //關閉Loading
        }
        if (res.data.code === 200) {
            return res
        } else if (res.data.code === 301) {
            Message.error("請先登錄");
        } else {
            Message.error("請求錯誤")
        }

    }, err => {
        return Promise.resolve(err)
    }
)
export default _axios /*記得導出*/

四、注意：

不加target的時候：

加了target的時候：

故，若option中未使用target指定需要覆蓋的 DOM 節點，則可以省去if那一步操作。