axios拦截，api统一管理

1首先新建两个文件 用来封装我们的axios拦截和api

分别使用 npm i下载我们需要用到的axios router qs vuex 和vant

2在request文件中将我们需要使用的工具引入

因为我们是移动端开发，所以将toast动画按需引入进来，

3创建axios实例

设置baseURL
还有超时时间

4设置我们的请求拦截

在请求拦截里边做一些操作

• 开启loding动画的效果
• 判断vuex有没有token 有的话将他存进请求头
• 最后将config返回出去
• 后边再协商请求失败执行的方法

5响应拦截

响应拦截中也有对应要进行的操作

• 根据后台返回的参数是否存在token 然后进行对应的操作
• 栗子中写的是token无效后台返回的是无效token 我们就要跳转到登录页面进行登陆操作
• 最后不管是否请求到数据 都要将loding动画关闭
• 将response返回
• 最后的是响应拦截失败的操作 将失败的错误返回

6导出http

拦截操作完成后将http导出 在home(home这个是我起的名字 也可以叫别的)文件中引入进行接口的统一管理

home.js中的方法

将我们在request中导出的http进行引入
我用的是async await的方法同步书写 不使用进行异步的书写也没问题
写一个函数 在函数内部进行http请求 将请求作为返回值返回 在底部进行导出
在需要使用的组件进行按需引入

import { getlist } from “@/utils/api/home.js”
@/utils/api/home.js这个是我文件所在的路径 @代表src根路径

如果需要引入多个，就这样写

import { getlist , getnode } from “@/utils/api/home.js”