源码git地址：https://github.com/Sincenir/si-api
前言（为何做）
过去的一段时间，我都认为 接口请求 封装是前端的必修课。只要是写过生产环境前端代码的人，应该都脱离不了异步接口请求，那么 接口请求 的 封装 是必经之路。
直到前些天，我们屋某个美团写后台的小姑娘问我前端问题时。我才发现她们代码中的 接口请求 ，都是没有任何的封装，直接采用以下方式进行：
axios.post(`/api/xxxx/xxxx?xxx=${xxx}`, { ...data })
.then((result) => {
if (result.errno) {
....
} else {
....
}
})
.catch((err) => {
....
})
这样写也不是说不好，在某种程度上，这增加了代码的可读性。
但是我们大多数页面需要的接口都不止一个，那么我们的组件中极有可能出现 数十上百 行重复代码。
那么随着请求的体量越来越大，我们的项目便越来越难以维护。
效果演示
const [e, r] = await api.getUserInfo(userid)
if (!e && r) this.userInfo = r.data.userinfo
上面是我们最终的实现效果。
接下来，我将带大家一步一步封装一套属于我们自己的 接口请求工具 ，同时也希望大家分享更好的思路。
注：
- 如果你希望直接看源码，请翻到 《完整代码》
- 这里以
axios作示范，同样换成fetch、 小程序的request都是可以的- 我将会采用
typeScript书写这段教程，如果你不需要，忽略掉对应的类型即可
思路清晰，先说分析（做什么）
在我们正式开发前，首先需要清楚请求一个接口都做了什么。
为此，消耗了两个小时时间，做了一个请求流程图，以便于我们后续进行需求分析（小声bb：Processon真难用
标签：errMessage,case,axios,封装,config,break,终身,const,data From： https://www.cnblogs.com/stcx330/p/16854815.html