从零搭建项目(6) --- 前端: 支持Axios

我的博客地址

正式地址
测试地址
前端源码
后端源码

文章目录

1. 项目及其技术栈介绍
2. 前端: 项目初始化
3. 前端: 使用Sass和Antd
4. 前端: 开发体验优化
5. 前端: 搭建路由和状态管理
6. 前端: 支持Axios
7. 前端: 打包与环境变量设置
8. 前端: 团队代码规范
9. 后端: 项目初始化和使用Koa相关
10. 后端: 使用TypeORM和MySQL
11. 部署: 使用nginx部署前端项目
12. 部署: 后端部署
13. 部署: 使用jenkins自动化部署

前言

目前前端和后端的通信基本都是使用的AJAX，现在对于AJAX封装的比较完备的库首推Axios，这篇文章就介绍如何在我们的项目中支持Axios。

支持Axios

• 安装Axios
  没啥好说的，直接npm i -S axios
  另外我们需要安装qs以及它的类型库，qs用作将{a: 1, b: 1}这样的参数转换为a=1&b=1的形式，在Axios中常用作put或者post方法中
  npm i -S qs，npm i -D @types/qs

• 然后我们在src文件夹中新建一个services文件夹，再在里面新建http.ts和api.ts两个文件，其中api.ts文件用作存放请求api，http.ts用作二次封装Axios:
  

  image.png

• 首先我们去到http.ts文件中，对Axios文件进行二次封装，主要工作是添加请求拦截器和结果拦截器。我们先定义一个baseUrl，例如下面这个:
  

  image.png

• 然后我们通常会用到的是get、post、delete、'put'四种方法，所以分别定义这四种方法的类型
  

  image.png

• 之后创建一个空对象，对这四个方法都进行一次配置，记得post和put方法需要使用qs对请求参数进行转换，具体代码如下

import axios, { AxiosRequestConfig } from 'axios'
import qs from 'qs'

const baseURL = 'http://127.0.0.1:3001/api'

type Request = (url: string, data?: object) => Promise<any>

interface HttpRequest {
    get?: Request
    post?: Request
    delete?: Request
    put?: Request
}

type Method = 'get' | 'post' | 'delete' | 'put'

const methods: Method[] = ['get', 'post', 'delete', 'put']

const http: HttpRequest = {}

methods.forEach(v => {
    http[v] = (url: string, data: any) => {
        const config: AxiosRequestConfig = {
            url,
            method: v,
            baseURL
        }
        const instance = axios.create({
            baseURL
        })
        // 请求拦截器
        instance.interceptors.request.use(
            cfg => {
                // 在这里可以对请求添加头部信息
                return cfg
            },
            error => {
                // 错误抛出
                return Promise.reject(error)
            }
        )
        // 结果拦截器
        instance.interceptors.response.use(
            res => {
                if (res && res.data) {
                    return res.data
                }
                return res
            },
            error => {
                // 错误抛出
                return Promise.reject(error)
            }
        )

        if (v === 'get' || v === 'delete') {
            config.params = data
        } else {
            config.data = qs.stringify(data)
        }

        return instance
            .request(config)
            .then(res => {
                return res
            })
            .catch(err => {
                // 错误集中处理
                return Promise.reject(err)
            })
    }
})

export default http

• 最后在instance的catch中对错误进行集中处理，这里可以使用antd的message组件进行通知，例如我的错误集中处理是下面这样的:
  

  image.png

• 然后我们来测试一下结果，在api.ts文件中引入http对象，并写一个接口article/list，这个接口是我提前写好的，用作请求文章列表:
  

  image.png
  记得在webpack.config.js和tsconfig.json中配置好路径别名，因为请求数据会经常用到api.ts中的方法:
  image.png
  image.png
  我们去到PageA组件中进行测试:
  image.png
  可以清楚的看到接口请求已经成功了:
  image.png
  image.png

• 注意，按照这个结构今后所有的请求方法都会写在api.ts文件中，如果接口太多导致api.ts文件臃肿，也可以根据业务划分对接口进行分类，进而分模块，例如下面这个2000多个接口的项目:
  

  image.png