当前位置：首页 > article >正文

【vue2.7.16系列】手把手教你搭建后台系统__封装工具库（4）

article 2024/10/10 4:17:26

封装 axios 模块

使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的代码冗余，让代码变得越来越难维护。
所以我们在这里先对 axios 进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。

封装要点

统一 url 配置
统一 api 请求
request (请求) 拦截器，例如：带上token等，设置请求头
response (响应) 拦截器，例如：统一错误处理，页面重定向等
根据需要，结合 Vuex 做全局的 loading 动画，或者错误处理
将 axios 封装成 Vue 插件使用

在 src 目录下，新建一个 utils 文件夹，用来存放 工具库 代码。新建一个 api 文件夹，用来管理接口。

在utils目录下，新建request.js文件用来封装axios

// 导入axios库
import axios from 'axios';

// 创建一个新的axios实例
const instance = axios.create({
  // 设置默认的基础URL
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 拦截请求
instance.interceptors.request.use(
  // 在发送请求之前做些什么，例如添加token到请求头中
  config => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  // 对请求错误做些什么
  error => {
    return Promise.reject(error);
  }
);

// 拦截响应
instance.interceptors.response.use(
  // 对响应数据做点什么
  response => {
    return response;
  },
  // 对响应错误做点什么
  error => {
    if (error.response.status === 401) {
      // 例如，如果响应状态码为401，跳转到登录页面
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

// 导出封装后的axios实例
export default instance;