（十七）Vue3-huohuo-admin axios请求接口

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天

准备

• axios 官方文档：除了在这里了解axios，更重要的是如何使用它的配置项、api
• 案例：简洁版（了解基本原理和使用）=》进化版（功能的逐步完善）=》高阶版（模块与封装）

代码思路

1. 请求加载动画选用 nprogress

# 请求拦截开启动画
NProgress.start();

# 响应拦截及请求失败关闭动画
NProgress.done();

2. 通用配置

• axios 中文文档

const defaultConfig: AxiosRequestConfig = {
  # 相对 URL（平台根据当前环境判断baseURL的值，VITE_PROXY_DOMAIN_REAL为线上环境接口地址，VITE_PROXY_DOMAIN为本地开发环境接口代理地址）
  baseURL:
    process.env.NODE_ENV === "production"
      ? VITE_PROXY_DOMAIN_REAL
      : VITE_PROXY_DOMAIN,
  # 请求超时时间
  timeout: 10000,
  # 请求头
  headers: {
    Accept: "application/json, text/plain, */*",
    "Content-Type": "application/json",
    "X-Requested-With": "XMLHttpRequest"
  },
  # 采用qs将数组格式参数序列化（支持数组格式的参数）
  paramsSerializer: params => qs.stringify(params, { indices: false })
};

3. 将所有请求工具和方法都封装在了一个叫PureHttp的类

• 两个构造函数，在PureHttp创建或者实例化时候被调用： ① 请求拦截 httpInterceptorsRequest ② 响应拦截 httpInterceptorsResponse
• 工具函数 ① 通用请求工具函数 request ② post 工具函数 post ③ get 工具函数 get

4. Token 及过期自动刷新

• 这里涉及三个文件 ① auth.ts ② user.ts ③ http/index.ts

auth.ts代码解析：

• 存储token放入Cookies和sessionStorage，键名：TokenKey
• 暴露方法： ① getToken：获取 token ② setToken：设置 token 以及过期时间（后端需要将用户信息和 token 以及过期时间都返回给前端，过期时间主要用于刷新 token，当然你也可以不采用此种方法刷新 token，你可以自行编写根据状态码判断是否 token 过期） ③ removeToken：删除 token

user.ts代码解析：

• 两个变量 token、name
• 三个方法 ① 通过loginByUsername调用登录接口进行登录 ② 通过logOut调用登出函数进行清空缓存信息并登出 ③ 通过refreshToken调用刷新 token 接口进行 token 刷新

http/index.ts代码解析：

request 公共通用方法参数：method请求方法、url请求地址、param请求参数、axiosConfig额外配置 post 公共 post 请求参数：url请求地址、params请求参数、config额外配置 get 公共 get 请求参数：url请求地址、params请求参数、config额外配置

• token 过期判断 主要观察 expired，通过过期时间戳减去当前时间戳，如果大于 0，则说明 token 没有过期，如果小于等于 0 则 token 过期

const token = getToken();
if (token) {
  const data = JSON.parse(token);
  const now = new Date().getTime();
  const expired = parseInt(data.expires) - now <= 0;
  if (expired) {
    # token过期刷新
    useUserStoreHook()
      .refreshToken(data)
      .then((res: resultType) => {
        config.headers["Authorization"] = "Bearer " + res.accessToken;
        return $config;
      });
  } else {
    config.headers["Authorization"] = "Bearer " + data.accessToken;
    return $config;
  }
} else {
  return $config;
}

使用方法

Get 请求

import { http } from "/@/utils/http";

// params传参
http.request('get', '/xxx', { params: param });

// url拼接传参
http.request('get', '/xxx?message=' + msg);

Post 请求

import { http } from "/@/utils/http";

// params传参
http.request('get', '/xxx', { params: param });

// data传参
http.request('get', '/xxx', { data: param });