ζανγκ Η βροχή ρέγκο 2021-11-04 10:40 采纳率: 75%
浏览 47
已结题

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

之前每一次请求时会加载一个叫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
  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2021-11-04 11:02
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月12日
  • 已采纳回答 11月4日
  • 创建了问题 11月4日

悬赏问题

  • ¥15 调用函数时,无关变量的改变引起函数值的改变
  • ¥15 xy坐标转化为经纬度坐标
  • ¥15 一般三角模糊数的上界值和下届值取中值的多少比较合理?
  • ¥15 关于#python#的问题,请各位专家解答!
  • ¥20 Hbase启动失败,无法启动HMaster
  • ¥15 sqpingboot在父模块已经引入了mybatisplus 在子组件不写版本号还是报错
  • ¥20 Lumerical FDTD solutions 中模型的相对阻抗,有效介电常数和有效磁导率的实部和虚部的数据如何获得?
  • ¥100 sql reporting service 远程smtp服务器配置支持
  • ¥15 ppyoloe_r带角度目标检测,loss_cls没法收敛
  • ¥15 淘宝交易指数如何解读,其关联的数据指标是什么