axios封装

1.安装axios

npm i axios

cnpm install axios

2.新建 src/utils/request.js 模块,代码如下

//1. 创建一个新的axios 实例
//2. 请求拦截器,如果有token进行头部携带
//3. 响应拦截器: 1.剥离无效数据 2.处理token失效
//4. 导出一个函数,调用当前的axios实例发请求.返回值 promise

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,
});

instance.interceptors.request.use(
  (config) => {
    //拦截业务逻辑
    //进行请求配置的修改
    //如果本地有token就在头部携带
    //1. 获取用户信息对象
    const { profile } = store.state.user;
    // 2. 判断是否有token
    if (profile.token) {
      //  3.设置token
      config.headers.Authorization = "Bearer " + profile.token;
    }
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

// res=>res.data 取出datat数据,将来调用接口的时候直接拿到的就是后台的数据
instance.interceptors.response.use(
  (res) => res.data,
  (err) => {
    // 401 状态码的时候 , 进入该函数
    if (err.response && err.response.status === 401) {
      // 1. 清空无效用户信息
      store.commit("user/setUser", {});
      // 2. 跳转到登录页码 ,  跳转需要传参 (当前路由地址) 给登录页码  组件中获取: $route.fullPath (完整路径)
      // js模块中: router.currentRoute.value.fullPath 就是挡墙路由地址, router.currentRoute 是ref响应数据(vue3.0 得加 .value, vue2.0不用加)
      const fullPath = encodeURIComponent(router.currentRoute.value.fullPath)   //因为有特殊字符需要 用encodeURIComponent() 转码
      router.push("/login?redirectUrl=" + fullPath);
    }
    return Promise.reject(err);
  });

  // 请求工具函数
export default (url,method,submitDate) => {
  // 负责发请求: 请求地址,请求方式,提交的数据
  return instance({
    url,
    method,
    // 1. 如果是get请求 需要使用params来传递submiyData
    // 2. 如果不是get请求 需要使用data来传递submiyData
    // [] 设置一个动态的key, 写js表达式,js表达式的执行结果当做key   toLowerCase()字母转小写
    [method.toLowerCase() === "get" ? "params" : "data"]: submitDate,
  });
}