前端架构带你 封装axios，一次封装终身受益！

前言（为何做）

过去的一段时间，我都认为 接口请求 封装是前端的必修课。只要是写过生产环境前端代码的人，应该都脱离不了异步接口请求，那么 接口请求 的 封装 是必经之路。

直到前些天，我们屋某个美团写后台的小姑娘问我前端问题时。我才发现她们代码中的 接口请求 ，都是没有任何的封装，直接采用以下方式进行：

代码语言：javascript复制

axios.post(`/api/xxxx/xxxx?xxx=${xxx}`, { ...data })
.then((result) => {
    if (result.errno) {
        ....
    } else {
        ....
    }
})
.catch((err) => {
    ....
})

这样写也不是说不好，在某种程度上，这增加了代码的可读性。 但是我们大多数页面需要的接口都不止一个，那么我们的组件中极有可能出现 数十上百 行重复代码。

那么随着请求的体量越来越大，我们的项目便越来越难以维护。

效果演示

代码语言：javascript复制

const [e, r] = await api.getUserInfo(userid)
if (!e && r) this.userInfo = r.data.userinfo

上面是我们最终的实现效果。

接下来，我将带大家一步一步封装一套属于我们自己的 接口请求工具 ，同时也希望大家分享更好的思路。

注：

• 如果你希望直接看源码，请翻到 《完整代码》
• 这里以 axios 作示范，同样换成 fetch 、 小程序的 request 都是可以的
• 我将会采用 typeScript 书写这段教程，如果你不需要，忽略掉对应的类型即可

思路清晰，先说分析（做什么）

在我们正式开发前，首先需要清楚请求一个接口都做了什么。

为此，消耗了两个小时时间，做了一个请求流程图，以便于我们后续进行需求分析（小声bb：Processon真难用