BuildAdmin20：前端项目如何设计一个异步API请求模块

原创

叫我阿柒啊

修改于 2025-02-13 10:59:42

24400

代码可运行

文章被收录于专栏：vue前端之路vue前端之路入门到放弃之路

运行总次数：0

代码可运行

在文章开始之前，推荐一些很值得阅读的好文章！感兴趣的也可以去看一下哦！

今日推荐：项目如何从Docker慢慢演变成了K8s部署

文章链接：https://cloud.tencent.com/developer/article/2469505

推荐原因：在这篇文章中，将从 Docker 开始讲解，分析为什么一个传统的项目逐步演变成了今天流行的 Kubernetes（K8s）集群部署架构

前言

在前后端分离的架构中，后端负责封装api接口，前端负责请求api接口。我通常使用Springboot来开发后端，在前端项目中就要实现api请求模块。

在之前拆解BuildAdmin的项目中，因为一直在构建前端页面的各个模块，就没有开发后端接口。后面就打算开始后端开发，例如菜单的请求、数据页面的渲染等等。那么前端如何请求这些后端接口呢，所以这边篇文章还是来封装一个前端的接口请求模块。

axios工具类

在BuildAdmin的前端请求中都是异步请求。所以在封装请求模块的时候，我们就是用axios模块来实现。先去官网看看axios的样例。

创建实例

首先我们可以通过api或者实例的方式来发起请求。api请求方式如下：

// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

也可以通过创建一个Axios实例，来发起请求。

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

因为这里是要封装一个工具类，所以还是返回实例比较合适，所以在这里我们就封装一个请求方法createAxios，在方法里面我们创建一个Axios实例：

const instance = axios.create({
    baseURL: process.env.BASE_URL,
    timeout: 1000 * 10,
    headers: {
        server: true,
    },
    responseType: 'json',
})

axios.create 返回的是一个AxiosInstance，而也就是上面的instance。

我们通过process.env从 .env.dev 等配置文件中，获取接口的baseURL。使用responseType来约定后端返回的是json格式的数据。

请求配置

在上面我们在axios.create中定义了四个请求参数，并且返回了一个AxiosInstance，除此之外我们看看还有哪些常见的请求参数。

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认值

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // 自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是与请求一起发送的 URL 参数
  // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `data` 是作为请求体被发送的数据
  data: {
    firstName: 'Fred'
  },
  
  // 发送请求体数据的可选语法
  // 请求方式 post
  // 只有 value 会被发送，key 则不会
  data: 'Country=Brasil&City=Belo Horizonte',

  // `timeout` 指定请求超时的毫秒数。默认值是 `0` (永不超时)
  timeout: 1000, 


  // `responseType` 表示浏览器将要响应的数据类型
  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 浏览器专属：'blob'
  responseType: 'json', 

  // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
  responseEncoding: 'utf8', // 默认值
}

拦截器

AxiosInstance继承了Axios接口，我们查看Axios的接口定义，可以通过interceptors来配置请求和响应两个拦截器。

axios.interceptors.request 用于在每次发送请求前，对请求配置进行修改或进行一些预处理操作。拦截器使得开发者可以集中处理与请求相关的逻辑，例如添加认证信息、设置通用的请求头、打印日志等，从而提升代码的复用性和可维护性。

axios.interceptors.response 用于拦截每个 HTTP 响应。它允许你在响应被传递到业务逻辑之前，对响应数据进行处理，或者对错误进行统一处理。

下面我就将拦截器的代码逻辑实现了一下：

instance.interceptors.request.use(
    (config) => {
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

// 响应拦截
instance.interceptors.response.use(
    (response) => {
        return response
    },
    (error) => {
        // 错误继续返回给到具体页面
        return Promise.reject(error)
    }
)

但是在request拦截器中没有修改config，在response拦截器中也没有处理response，如果有拦截逻辑可以在里面进行实现。

封装

在了解完axios的基本用法和实现之后，我们就开始在请求工具类axios.ts中封装createAxios方法。

function createAxios(axiosConfig: AxiosRequestConfig): AxiosPromise {
const instance = ...
instance.interceptors.request.use ...
instance.interceptors.response.use ...

return instance(axiosConfig) as AxiosPromise
}

在createAxios中有额外传入了一个axiosConfig请求配置，然后通过 instance(axiosConfig) 又添加将配置传到了instance对象中。

在这里instance(config) 的行为等价于 instance.request(config)。这是因为 instance 本身就是对 request 方法的绑定，所以最后会返回一个 Promise 对象。

如下图，这是Axios中对于request函数定义：

下图是AxiosInstance中的函数类型签名，在 Axios 的实现中通过函数绑定和方法转发机制，将instance(config) 转发到了 instance.request(config)。

这样我们就从axios.ts中获取了一个Promise对象。接着我们看看如何针对于前端中的每个需要从数据请求的组件，来设计一个api模块。

api模块

这里就举一个例子，例如获取仪表盘的数据信息，我在api模块下定义了dashboard.ts文件，代码如下：

import createAxios from '/@/utils/axios'

export function dashboard() {
    return createAxios({
        url: '/admin/Dashboard/dashboard',
        method: 'get',
    })
}

这里调用了createAxios，然后相当于调用了axios的request发起了请求，最后返回了一个Promise。然后我们就在dashboard页面调用这个dashboard(）发起请求即可。

import { dashboard } from '/@/api/backend/dashboard'
dashboard().then((res) => {
    state.remark = res.data.remark
})

这样就完成了从构建axios接口到接口调用的闭环。

结语

本篇文章主要是对axios工具类的一个定义，针对于前对每个页面的api定义和调用，会放在后面每个模块的实现中。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S10

axios

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度