在TypeScript项目中搭配Axios封装后端接口调用

前言

本来是想发 next.js 开发笔记的，结果发现里面涉及了太多东西，还是拆分出来发吧~

本文记录一下在 TypeScript 项目里封装 axios 的过程，之前在开发 StarBlog-Admin 的时候已经做了一次封装，不过那时是 JavaScript ，跟 TypeScript 还是有些区别的。

另外我在跟着 next.js 文档开发的时候，注意到官方文档推荐使用 @tanstack/react-query 来封装请求类的操作，浅看了一下文档之后感觉很不错，接下来我会在项目里实践。

定义配置

先创建一个 global 配置，src/utilities/global.ts

export default class Global {
  static baseUrl = process.env.NEXT_PUBLIC_BASE_URL
}

这是在 next.js 项目，可以用 next 规定的环境变量，其他项目可以自行修改。

封装 auth

认证这部分跟 axios 有点关系，但关系也不是很大，不过因为 axios 封装里面需要用到，所以我也一并贴出来吧。

创建 src/utilities/auth.ts 文件

/**
 * 登录信息
 */
export interface LoginProps {
  token: string
  username: string
  expiration: string
}

/**
 * 认证授权工具类
 */
export default abstract class Auth {
  static get storage(): Storage | null {
    if (typeof window !== 'undefined') {
      return window.localStorage
    }
    return null
  }

  /**
     * 检查是否已登录
     * @return boolean
     */
  public static isLogin() {
    let token = this.storage?.getItem('token')
    let userName = this.storage?.getItem('user')

    if (!token || token.length === 0) return false
    if (!userName || userName.length === 0) return false
    return !this.isExpired();
  }

  /**
     * 检查登录是否过期
     * @return boolean
     */
  public static isExpired = () => {
    let expiration = this.storage?.getItem('expiration')
    if (expiration) {
      let now = new Date()
      let expirationTime = new Date(expiration)
      if (now > expirationTime) return true
    }

    return false
  }

  /**
     * 读取保存的token
     * @return string
     */
  public static getToken = () => {
    return this.storage?.getItem('token')
  }

  /**
     * 保存登录信息
     * @param props
     */
  public static login = (props: LoginProps) => {
    this.storage?.setItem('token', props.token)
    this.storage?.setItem('user', props.username)
    this.storage?.setItem('expiration', props.expiration)
  }

  /**
     * 注销
     */
  public static logout = () => {
    this.storage?.removeItem('token')
    this.storage?.removeItem('user')
    this.storage?.removeItem('expiration')
  }
}

跟认证有关的逻辑我都放在 Auth 类中了

为了在 next.js 中可以愉快使用，还得做一些特别的处理，比如我增加了 storage 属性，读取的时候先判断 window 是否存在。

封装 axios

关于 API 的代码我都放在 src/services 目录下。

创建 src/services/api.ts 文件，代码比较长，分块介绍，可以看到所有配置相比之前 JavaScript 版本的都多了配置，对 IDE 自动补全非常友好。

先 import

import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse, CreateAxiosDefaults} from "axios";
import Global from '@/utilities/global'
import Auth from "@/utilities/auth";

Axios 配置

定义一下 axios 的配置

const config: CreateAxiosDefaults<any> = {
  method: 'get',
  // 基础url前缀
  baseURL: `${Global.baseUrl}/`,
  // 请求头信息
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // 参数
  data: {},
  // 设置超时时间
  timeout: 10000,
  // 携带凭证
  withCredentials: true,
  // 返回数据类型
  responseType: 'json'
}

统一接口返回值

设置统一的接口返回值，这个和我在 StarBlog 后端里封装的那套是一样的，现在基本是我写后端的标准返回值了，同时也发布了 CodeLab.Share nuget包，可以快捷的引入这个统一的返回值组件。

// 统一接口返回值
export interface ApiResponse {
  data: any
  errorData: any
  message: string
  statusCode: number
  successful: boolean
}

定义 ApiClient

最后就是定义了 ApiClient 类，有点模仿 C# 的 HttpClient 内味了

这里面用到了 axios 的拦截器，发起请求的时候给 header 加上认证信息，返回的时候看看有没有错误，如果是 401 unauthorized 的话就跳转到登录页面。

export class ApiClient {
  private readonly api: AxiosInstance

  constructor() {
    this.api = axios.create({
      ...config,
    })

    this.api.interceptors.request.use(
      config => {
        config.headers.Authorization = `Bearer ${Auth.getToken()}`
        return config
      },
      error => {
        return error
      })

    this.api.interceptors.response.use(
      response => {
        return response
      },
      error => {
        let reason = error
        if (error && error.response) {
          if (error.response.data) {
            reason = error.response.data
            if (!reason.message) reason.message = error.message
          }
          if (error.response.status === 401) {
            location.href = '/login'
          }
        }

        return Promise.reject(reason)
      }
    )
  }

  public request(options: AxiosRequestConfig): Promise<ApiResponse> {
    return new Promise((resolve, reject) => {
      this.api(options).then((res: AxiosResponse<ApiResponse>) => {
        resolve(res.data)
        return false
      }).catch(error => {
        reject(error)
      })
    })
  }
}

export const api = new ApiClient()

export default api

代码比之前我在 StarBlog-Admin 里的简单一些，我要尽可能用较少的代码实现需要的功能。

编写具体接口调用

所有的接口调用我都写成 service （后端思维是这样的）

这里以发短信接口为例

创建 src/services/common.ts 文件，从刚才定义的 api.ts 里面引入 ApiClient 的对象，直接调用 request 方法就完事了。

参数类型是 AxiosRequestConfig ，不对 axios 本身做什么修改，我感觉比之前用 Antd Pro 魔改的接口舒服一些。

import {api} from './api'

export class SmsChannel {
  static local = 0
  static aliyun = 1
  static tencent = 2
}

export default abstract class CommonService {
  public static getSmsCode(phone: string, channel: number = SmsChannel.local) {
    return api.request({
      url: `api/common/getSmsCode`,
      params: {phone, channel}
    })
  }
}

小结

这样封装完比之前 StarBlog-Admin 的舒服很多，可惜之前那个项目用的是 vue2.x 似乎没法用 TypeScript。

就这样吧，大部分内容还是在 next.js 开发笔记中。

参考资料

• https://axios-http.com/zh/docs/interceptors
• https://tanstack.com/query/latest/docs/react/overview