signed

QiShunwang

“诚信为本、客户至上”

axios拦截,api统一管理

2021/6/3 15:44:59   来源:

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”

在这里插入图片描述