vue3后台管理框架之axios二次封装

最新推荐文章于 2024-11-18 19:42:29 发布

LL1018。

最新推荐文章于 2024-11-18 19:42:29 发布

阅读量445

点赞数

分类专栏： vue3+vite+TypeScript后台管理框架文章标签：前端框架前端 vue.js

本文链接：https://blog.youkuaiyun.com/m0_52704461/article/details/133849920

版权

本文介绍了如何在项目中使用axios插件进行网络请求的二次封装，包括设置请求和响应拦截器，以及处理常见的HTTP状态码错误。同时提到了安装axios和使用Element-Plus展示错误消息的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候

我们经常会把axios进行二次封装。

目的:

1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

安装依赖

pnpm add axios@0.21.3 -S

在根目录下创建utils/request.ts

import axios from "axios";
  import { ElMessage } from "element-plus";
  //创建axios实例
  const request = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 5000
  })
  //请求拦截器
  request.interceptors.request.use(config => {
  return config;
  });
  //