vue3中axios的封装-请求拦截、响应拦截

vue3 axios 的封装与 vue2 整体相同，细节需注意。整体思路可分为四步：

1. 创建一个新的 axios 实例
2. 请求拦截器，携带 token
3. 响应拦截器：剥离无效数据、处理 token 失效
4. 导出一个函数，调用 axios 发请求

1. 创建实例-配置基础 URL

import axios from "axios";
import store from "@/store";
import router from "@/router";
//导出基准地址，其他地方不是通过axios发请求的地方也会用到
export const baseURL = "http://pcapi-xiaotuxian-front-devtest.itheima.net/";
const instance = axios.create({
  //axios 配置 ： baseURL timeout
  baseURL,
  timeout: 5000, //5S超时
});

2. 拦截请求，将 token 携带到请求体

//请求拦截
instance.interceptors.request.use(
  (config) => {
    // 拦截的业务逻辑
    //获取本地 token
    const profile = store.state.user.profile;
    //判断是否有 token
    if (profile.token) {
      //设置 token
      config.headers.Authorization = `Bearer ${profile.token}`;
    }
    return config;
  },
  (err) => {
    //拦截失败
    return Promise.reject(err);
  }
);

3. 响应拦截—清空本地无效信息—跳转到登录页面，并且需携带当前路由地址给登录页，以便登录成功后返回原页面

//响应拦截
instance.interceptors.response.use(
  (res) => {
   return res.data;
  },
  (err) => {
    // 如果 401 状态码
    if (err.response && err.response.status === 401) {
      //1. 清空本地无效信息
      // 2.跳转到登录页面，并且需携带当前路由地址给登录页，以便登录成功后返回原页面
      store.commit("user/setUser", {}); //引入 store 模块
      // 当前路由地址--组件中'user?a=10', $router.path=== /user , $route.fullpath=== /user?a=10
      // js 模块中：router.currentRoute.fullPath 就是当前路由地址，vue3 中 router.currentRoute 是 ref 响应式数据，需加 .value
      // encodeURIComponent() js 原生转码 防止解析地址出问题，有可能会有特殊字符
      const fullPath = encodeURIComponent(router.currentRoute.value.fullPath);
      router.push("/login?redirectUrl=" + ""); //引入 router 模块
    }
    return Promise.reject(err);
  }
);

4. 配置请求函数，将函数暴露出去

// 请求工具函数,负责发请求，url,method,submitData
export default (url, method, submitData) => {
  return instance({
    url,
    method,
    // 1.如果是 get 请求，需要使用 params 传参
    // 2.如果是 post 请求，需要用 deta 传参
    // [] 可以设置动态变量，写 JS 表达式
    // 有可能用户传的是大写的 GET，POST，通过 toLowerCase() 全部转换为小写 toUpperCase() 全部转换为大写
    [method.toLowerCase() === "get" ? "params" : "data"]: submitData,
  });
};