Vue--封装axios请求

Vue–封装axios请求

流程如下
1.使用axios的create的方法创建一个新的axios实例，配置默认参数，其中包含，baseURL：这里可以是后端接口的全路径，也可以只配置一个所有接口添加的统一前缀，在本示例中，配置的是baseURL=‘/api’ .

2.配置请求拦截器：请求拦截器的作用是在向后端发送请求前，对其做的处理
如：在请求头中添加一个字段来绑定登录时后端传来的token ,这样浏览器在发送其他请求的时候就会携带有token 配合后端的认证.

3.配置响应拦截器：响应拦截器作用是在后端响应数据被处理之前对其进行一些处理或者修改。
例如：当前端携带的token不存在或者已经过期，这是后端会设置一个响应码（401）或者自定义相应信息，前端接收到响应信息，如果是401 说明该用户没有登录，这是就要清除浏览器中的token，重定向登录页面。

4.封装好axios请求之后，最后一步操作，导出axios 实例

// 引入axios库，这是一个基于Promise的HTTP客户端，用于浏览器和node.jsfrom "axios";
import { getToken, removeToken } from "./auth";
import { useRouter } from "vue-router";
import axios from "axios";
import { ElMessage } from 'element-plus'
const router = useRouter();
// 使用axios的create方法创建一个新的axios实例，并配置一些默认参数
// 这样可以避免在每次发送请求时都重复配置这些参数
const service = axios.create({
  // 设置请求的基础URL，所有请求都会基于这个URL
  baseURL: "/api",
  // 设置请求的超时时间，单位是毫秒，这里设置为5000毫秒，即5秒
  timeout: 5000,
});
// 为该axios实例添加请求拦截器
// 请求拦截器的作用是在请求被发送之前对其进行一些处理或修改
service.interceptors.request.use((config) => {
  // 在请求的头部添加一个名为'Authorization'的字段
  // 这通常用于身份验证，服务器会检查这个token来确定请求者的身份和权限
  config.headers["Authorization"] = getToken();
  // config.headers['tokeAuthorizationn']=getToken()
  // 返回修改后的请求配置，使其生效
  return config;
});
// 为该axios实例添加响应拦截器
// 响应拦截器的作用是在响应被处理之前对其进行一些处理或修改
// 设置响应拦截器
service.interceptors.response.use(response => {
      // 对响应数据做些处理
      return response; // 假设你总是期望从data中获取响应内容
    },
    error => {
      // 对响应错误做处理
      const { status } = error.response; // 获取错误状态
      // 如果响应的状态码为401，则说明用户没有登录，需要将页面重定向到登录页，并清除token
      if (status === 401) {
        ElMessage.error('登录已过期，请重新登录');
        setTimeout(() => {
            localStorage.clear();
            sessionStorage.removeItem('token');
          window.location.href = "/";
        }, 1000); // 延迟2秒执行重定向和清理操作
      }
      return Promise.reject(error);
    }
  );
  
// 导出这个配置好的axios实例，以便在其他文件中使用
export default service;