从零搭建项目(6) --- 前端: 支持Axios
我的博客地址
正式地址
测试地址
前端源码
后端源码
文章目录
项目及其技术栈介绍
前端: 项目初始化
前端: 使用Sass和Antd
前端: 开发体验优化
前端: 搭建路由和状态管理
前端: 支持Axios
前端: 打包与环境变量设置
前端: 团队代码规范
后端: 项目初始化和使用Koa相关
后端: 使用TypeORM和MySQL
部署: 使用nginx部署前端项目
部署: 后端部署
部署: 使用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
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
发表评论 (审核通过后显示评论)：