Vue 项目 API 接口封装

Vue 项目 API 接口封装

参考：

• https://axios-http.com/
• https://cli.vuejs.org/zh/guide/mode-and-env.html
• https://codeantenna.com/a/B9ng1xY7vQ
• https://stackoverflow.com/questions/43013858/how-to-post-a-file-from-a-form-with-axios
• https://stackoverflow.com/questions/41938718/how-to-download-files-using-axios
• https://stackoverflow.com/questions/21660791/what-is-the-main-difference-between-patch-and-put-request#:~:text=According to HTTP terms%2C The,some portion of existing resource
• https://axios-http.com/docs/urlencoded
• https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data
• https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/POST

一、前言

之前接手了实习生写的项目，我对很多地方做了完善，其中包括 API 接口封装，因此借此机会将这部分经验转化为文字分享给大家。看前须知，项目是用 VueCLI 搭建的。

一般来说，公司的后端采用 RESTful API 的规范来编写接口的。

项目前期接口较少，因此前后端联调时，请求数据时一般会写成这样：

javascript // 拿取货物数据 fetchGoodsData () { return axios.get('http://xxx.yyy.zzz:3000/api/product1/v1/goods') }

然而，随着产品的功能迭代，接口自然也会越来越多，如果还是按照上面的方式去写，将会面临一系列的麻烦：

第一、永久性变量冗余。 例如， http://xxx.yyy.zzz:3000/api/product1/v1/ ，这一串几乎永远是冗余的；

第二、高强度心智负担。 例如，http://xxx.yyy.zzz:3000/api/product1/v1/carts?page=1&size=-1 ，一旦传递的参数过多，就会出现漏写、写错的情况；

第三、模块过于扁平化。 我们从上面几个接口上是无法直接判断当前接口请求的数据究竟属于哪一个功能模块，而且请求含义不明确，非常依赖开发人员编写的方法名。

为了解决以上几个难题，我们就需要对 API 进行封装。

二、问题分析

面对这样一个复杂的问题，思路往往是反其道而行之的，“分而治之”， 让其简单化。

打开后端给的 API 文档，举个例子，假设有以下几个模块：

• 用户模块
• 货物模块
• 购物车模块
• ……

回想前言中提