怎么改在每次发起网络请求的时候显示loading呢？

Question

之前每一次请求时会加载一个叫NProgress的进度条插件，可样子不太明显，就想换一个页面中有loading样子的插件, 下载了一个叫Vue Loading Overlay的全屏加载组件，但不知道该怎么用？

代码这里是用的NProgress进度条，我给他注释了

import axios from 'axios';
import store from 'store';
import defaultUrl from './config.js'
// import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'

// 创建一个axios实例
const service = axios.create({
        headers: {
            'content-type': 'application/json;charset=UTF-8',
            // 'Content-Type': 'application/x-www-form-urlencoded', // 模拟form表单方式提交请求
            // 'Content-Type': 'multipart/form-data'
            //   'token': 'one' 
        },
        baseURL: defaultUrl,
        // changeOrigin: true, //是否跨域
        // withCredentials: true, //表示跨域请求时是否需要使用凭证
        timeout: 60000
    })
    // 添加请求拦截器
service.interceptors.request.use(config => {
    // 参数转换为表单模式
    // if (config.data) {
    //     config.data = Qs.stringify(config.data)
    // }
    // 在发送请求之前设置token
    config.headers['Authorization'] = store.get('UserUID');
    return config;
}, error => {
    // 请求错误时做些事
    return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(response => {
    //NProgress.start();
    if (response.status == 200) {
         console.log(response)
        const res = response.data;
        // 如果返回的状态不是200 就主动报错
        //NProgress.done()
        return res;
    } else {
        
    //NProgress.done()
        return Promise.reject("服务器请求错误")
    }
}, error => {
    return Promise.reject(error); // 返回接口返回的错误信息
})

export default service

Answer 1

每个接口都loading就得再请求拦截器里加 。 请求拦截器 里 loading打开 。 响应拦截器关闭 。然后 loading组件 要能拿到这个值。