前端全局加loading

最新推荐文章于 2024-06-25 08:58:06 发布

hangchuan_

最新推荐文章于 2024-06-25 08:58:06 发布

阅读量236

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/hangchuan_/article/details/131867840

版权

文章介绍了如何在基于Element-plus的项目中，利用axios的请求和响应拦截器来实现全局的loading效果，以防止用户在数据加载时进行其他操作。同时，提到了编辑操作可能引起的多次请求问题，以及项目的防抖处理。

摘要由CSDN通过智能技术生成

注：项目基于Element-plus && Js

首先我们的项目需求是前端在每次获取数据的时候都要loading一下，避免用户在使用的时候触发其他操作（可以理解为锁屏）；

思路：通过 axios 提供的请求拦截和响应拦截的接口，这样全局的只要发起请求就会loading；

问题：比如编辑操作会先请求一次接口再刷新一次页面，发起两次请求，这个请参考防抖，目前项目这个问题并未出现

/*
 * @Author: your name
 * @Date: 2022-05-05 14:49:02
 * @LastEditTime: 2022-06-13 10:27:59
 * @LastEditors: 1003178 958152
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \client\src\request\index.ts
 */
import axios, { AxiosRequestConfig } from 'axios'
import { ShowError } from '../utils/index'
// 引入进度条的js
import NProgress from 'nprogress'
// 引入 进度条的css
import 'nprogress/nprogress.css'
import Phonpa from "phonpa";
import { ElMessage,ElLoading } from 'element-plus';


axios.defaults.baseURL = process.env.VUE_APP_BaseURL

// //loading对象
let loading:any;


const service = axios.create({
  timeout: 60000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  }
})

//显示loading
function showLoading(target:any) {
    loading = ElLoading.service({
      lock: true,
      text: "Loading...",
      background: 'rgba(0, 0, 0, 0.7)',
      target: target || "body"
    });
  }

//隐藏loading
function hideLoading() {
    loading.close();
}


// 添加请求拦截器
service.interceptors.request.use(
  function (config) {

    showLoading("")


    NProgress.start()
    return config
  },
  function (error) {
    NProgress.done()
    return Promise.reject(error)
  }
)

// 添加响应拦截器
service.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // dataAxios 是 axios 返回数据中的 data


   setTimeout(()=>{
    hideLoading()
   },300)

    const dataAxios = response.data
    // eslint-disable-next-line eqeqeq
    NProgress.done()
    if (dataAxios.Code !== 1) {  
      ShowError(dataAxios.Message)  
    }
    return dataAxios
  },
  function (error) {
    setTimeout(()=>{
      hideLoading()
     },300)
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    // ShowError(error)
    if(error.response) {
      const statusCode = error.response.status;    
      if(statusCode === 401) {
        ElMessage({
          message: '鉴权错误，请重新登陆',
          grouping: true,
          type: 'error',
        })
      } else {
        ShowError(error)
      }
    }
    NProgress.done()
    return Promise.reject(error)
  }
)

// export default service
export default function(config: AxiosRequestConfig){
  var user_info = Phonpa.phonpa_api.get_user_info();
  let OrgId = localStorage.getItem('orgId'); 
  let OrgHouse:string = localStorage.getItem('OrgHouse') ?? ""; 
  

  var token = "";
  if(user_info != null && user_info != undefined){
    try {
      token = user_info["access_token"];
    } catch (error) {
    }
  }
  config.headers = {
    'Content-Type': 'application/json',
    "Authorization": "Bearer " + token,
    "OrgId" : "" + OrgId,
    "OrgHouse":encodeURIComponent(OrgHouse)
  };

  
  return service(config);
}