Day 5 登录页及路由 （三） 基于axios的API调用

系列文章目录

本系列记录一下通过Abp搭建后端，Vue+Element UI Plus搭建前端，实现一个小型项目的过程。

• Day 1 Vue 页面框架
• Day 2 Abp框架下，MySQL数据迁移时，添加表和字段注释
• Day 3 登录页以及路由 (一）
• Day 4 登录页以及路由 (二）Vue状态管理

---

文章目录

• 目录

  系列文章目录

  文章目录

  前言

  一、axios

  二、封装还是不封装，这是个问题

  1. 封装的目的

  2. 怎么封装

  3. 到底要不要封装

---

前言

作为前后端分离的系统，请求后端API是一个必不可少的工作，本文就介绍了Vue中调用后端API的基础内容。

---

一、axios

Vue官方推荐使用axios来进行网络请求，于是先到axios的官网上看了一遍文档，其介绍是这样的：

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

大致看了一下官方文档，发现功能已经很齐全了，唯一需要处理的就是针对特定系统的配置性处理。程序员之魂开始燃烧，封印术已经按捺不住了。

二、封装还是不封装，这是个问题

1. 封装的目的

老套路，先看看别人怎么做的（程序员的事情，怎么能叫抄呢 ）。搜索一下，有做简单封装的（比如 这个 ），有做复杂封装的（比如这个和这个），同时评论区也有人疑惑为何要封装，是不是和axios背道而驰。

首先，封装的目的，总结下来大致有这么几个：

1.  统一请求头。大部分项目对应的后端，需要统一请求头，比如app,version,token之类的。既然是统一，那天然的就应该是放在封装层里面。
2. 错误处理。根据API返回结果，或者更底层一点，根据HttpStatus来进行通用的错误处理。啊哈，通用，懂了把。
3. 重试及取消操作。在网络世界，不通是常见的“偶发”问题。或者是连接失败，或者是服务器错误，或者是太阳黑子影响，总之，反应到页面上就是无法访问。然后刷新一下就神奇的好了。另外，操作响应时间不固定，性急的人往往会连击，而响应不一定是按请求顺序返回，或者直接不返回。不做处理的话，容易造成数据混乱，页面卡死之类的。这个时候取消一下前面的请求，让页面只对最后一个请求结果进行处理，会简化处理逻辑。同样，这个“应该”也是一个统一处理。
4. 开发过程中的配置。设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分。我的理解这是一个伪需求， axios本身的baseUrl就是干这个的。
5. 觉得axios是第三方库，对项目而言需要隔离一下，以备将来换成别的库。这个就见仁见智了，解耦到这个程度，还是需要一些勇气的。另外，你确定不是在重复设计axios？
6. 就是单纯不封装不舒服，不服来战

2. 怎么封装

具体封装的手段大致有两个：

1. 依赖拦截器，无论是请求拦截器还是响应拦截器，都是axios提供的扩展点。
2. 封装常用代码为方法。即把get、post等常用请求方法，再封装一次。这个我以为仅限于项目中对这些方法有特定需要的。因为axios本身就有别名方法，够满足大部分需要了。

3. 到底要不要封装

看了一圈下来，结合官方文档，我感觉二次封装有必要，但过度封装就没有必要了，搭建一个架子，把基本目标实现了就可以了，其它的后续再根据需求调整，渐进式开发嘛。

其实，从后端开发的角度来看，封装axios就和封装WebRequest，HttpClient之类的一样，根据实际需要来就行。要克制，过度设计有害健康。

另外，大部分文章都提到了将实际api的调用封装起来，放到单独的文件中去（比如api\xxxManage.ts）。这个我赞成，和后端服务层或数据访问层的作用一样。这么看，axios就和DBDriver一样，属于偏底层的库（当然，它的底层是XmlHttpRquest 和 node.js http 模块）。

基础研究到此为止，开始重复发明轮子。

三、实际操作

1. 代码结构

创建 src/api 文件夹，下面创建 index.ts 文件，axios的封装代码就写在这里了。然后针对不同的领域，建立不同的api封装文件。比如 login.ts 就封装登录相关api，提供给LoginView使用。

2. 调用端代码

参照TDD的方式，先写最顶层调用端代码

src/view/LoginView.vue

async function fakeLogin(event: Event) {
    //currentUser.setToken("faked login token")
    const loginRequest: Login.LoginRequest = { username: "test", password: "pw" }
    const loginResponse: Login.LoginResponse = await login(loginRequest)
    currentUser.setToken(loginResponse.access_token)
    currentUser.setUserInfo({ name: loginResponse.name })
}

伪代码一路到底，这里利用了语法糖， await还是很甜的。

然后定义login api 的封装接口，这里没有想好login方法是否要放入Login命名空间，暂时先这样吧。

src/api/login.ts

// 登录模块
export namespace Login {
  export interface LoginRequest {
    username: string
    password: string
  }
  export interface LoginResponse {
    access_token: string
    name:string
  }  
}

export const login = async (params: Login.LoginRequest) => {
    console.log("call async login.")
    const response:LoginResponse = { access_token:"token", name:"test user"}
    return response
}

测试一下，看看效果，点击Fake Login按钮后：

3. API 接入实现

先做基础配置工作，src/api/index.ts

import axios, { AxiosError } from 'axios'
import type { InternalAxiosRequestConfig } from 'axios'

import { BASE_URL } from '@/config'
import { useCurrentUserStore } from '@/stores/currentUser'

const instance = axios.create({
  baseURL: BASE_URL,
  timeout: 3000,  
})

instance.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    // 当前用户已登录的情况下，添加Authorization请求头
    const userStore = useCurrentUserStore()
    if (userStore.token != '') {
      if (config.headers && typeof config.headers.set === 'function') {
        config.headers.set('Authorization', userStore.token)
      }
    }
    return config
  },
  (error: AxiosError) => {
    return Promise.reject(error)
  }
)

export default instance

到这个阶段，暂时只是添加token到请求头里，其实这个都算早的，只是为了使用下拦截器，而且确实也是后面需要的功能，所以先写下来。后面错误处理还没有弄，这个需要结合页面表现再看。

另外就是BASE_URL直接使用了config的配置，关于环境的切换，发布时直接更改这个也不是很麻烦，暂时就先这样了。

重写 src/api/login.ts

import http from '@/api'
import type { Login, ResultDTO } from './interfaces'

export const login = async (
  params: Login.LoginRequest
): Promise> => {
  const { data } = await http.post('/api/account/login', params)
  return data
}

把请求和响应移到 interfaces文件中，统一管理了。这个只是一个习惯，看将来大概会从什么角度来阅读代码。所有请求放到一个文件，方便上手就能看到整体。放到接近使用的地方，比如login.ts中，则可以在使用的地方就知道具体含义，不过IDE的Go to definition功能也是很好用的。

interfaces里面还包括了后端响应基类，没有采用REST的推荐，自定义了Code，具体代码如下：

src/api/interface.ts

/** API响应 */
export interface ResultBase {
  /** 响应代码 */
  code: string
  /** 消息 */
  message: string
  /** 是否成功 */
  success: boolean
}
/** API响应 */
export interface ResultDTO extends ResultBase {
  /** 数据 */
  data: T
}

// 登录模块
export namespace Login {
    /** 登录请求 */
  export interface LoginRequest {
    /** 用户名 */
    username: string
    /** 密码 */
    password: string
  }
  /** 登录响应账号信息 */
  export interface LoginResponse {
    /** Token */
    token: string
    /** 用户昵称 */
    nickname: string
  }
}

四、总结

前面搞了一大堆，实际代码没有多少，另外错误处理也还没有弄，但是理清了思路。这里有一个点，就是src/api/login.ts 这个文件是否有必要，因为就是一行代码，封装成函数似乎有点重复且繁复。暂时留在这里也是为了错误处理，还没有思考具体错误处理是留在这里，还是放到view层，或者直接在 axios 封装代码里，通过响应拦截器处理。各有各的优缺点。等先把页面样式写好，再看看写到哪里比较合适。