位置:首页 > web前端 > javascript

接口封装方法推荐 axios封装前端接口方法

dearweb 发布:2022-10-19 16:36:40阅读:

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

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

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真难用

24人点赞 返回栏目 提问 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

手机扫码查看 手机扫码查看