Vue3+Ts+ElementPlus封装在请求前全屏显示加载

最新推荐文章于 2024-08-14 17:39:17 发布

80岁小姑娘

最新推荐文章于 2024-08-14 17:39:17 发布

阅读量239

点赞数 1

分类专栏： Vue3 TypeScript Element 文章标签： javascript 前端 vue.js typescript

本文链接：https://blog.csdn.net/m0_65884481/article/details/137555037

版权

Vue3 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

Element

10 篇文章 0 订阅

订阅专栏

TypeScript

8 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用axios创建请求实例，配置了请求和响应拦截器，展示了如何在发送请求时显示加载提示并处理不同状态下的错误信息。

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

//导入axios
import axios from 'axios'
import { ElLoading, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
import Tool from '../global';
import { nextTick, ref } from 'vue';
const router = useRouter()
const loadingInstance = ref()
//创建一个axios实例 
const instance = axios.create({
    headers: {
        'content-type': 'application/json',
    },
    // withCredentials: true,
    timeout: 15000  //5秒
})
// 请求拦截器测试

instance.interceptors.request.use(config => {
    // 在发送请求之前显示加载框
    loadingInstance.value = ElLoading.service({
      lock: true,
      text: '加载中...',
      background: 'rgba(255, 255, 255, 0.1)'
    });
    return config;
  }, error => {
    return Promise.reject(error);
  });
//http 拦截器
instance.interceptors.response.use(
    response => {
        //关闭加载框
        if(loadingInstance.value){
            nextTick(() => {
                loadingInstance.value.close();
            })
        }
        //拦截请求，统一相应
        if (response.data.isSuccess) {
            return response.data.result
        } else {
            ElMessage.error(response.data.msg)
            return response.data.result
        }
    },
    //error也可以处理
    error => {
        //关闭加载框
        if(loadingInstance.value){
            nextTick(() => {
                loadingInstance.value.close();
            })
        }
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    ElMessage.warning("登录失效，请重新登录")
                    router.push({ path: '/mlogin' })
                    break
                case 404:
                    ElMessage.warning("接口不存在，请检查接口地址是否正确！")
                    break
                case 500:
                    ElMessage.warning("内部服务器错误，请联系系统管理员！")
                    break
                default:
                    return Promise.reject(error.response.data)   // 返回接口返回的错误信息 
            }
        }
        // else {
        //     ElMessage.error("遇到跨域错误，请设置代理或者修改后端允许跨域访问！")
        // }
    }
)

export default instance

创建一个ts文件，盛放以上内容，然后调用就可以了