从零搭建项目(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 qsnpm i -D @types/qs

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

    image.png

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

    image.png

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

    image.png

  • 之后创建一个空对象,对这四个方法都进行一次配置,记得postput方法需要使用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
  • 最后在instancecatch中对错误进行集中处理,这里可以使用antd的message组件进行通知,例如我的错误集中处理是下面这样的:

    image.png

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

    image.png

    记得在webpack.config.jstsconfig.json中配置好路径别名,因为请求数据会经常用到api.ts中的方法:
    image.png

    image.png

    我们去到PageA组件中进行测试:
    image.png

    可以清楚的看到接口请求已经成功了:
    image.png

    image.png

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

    image.png

推荐阅读更多精彩内容