【vue2.7.16系列】手把手教你搭建后台系统_

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

封装 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({// 设置默认的基础URLbaseURL: '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;