×

【干货满满】API接口请求封装

万邦科技Lex 万邦科技Lex 发表于2025-08-27 17:03:39 浏览246 评论0

抢沙发发表评论

1.前言。 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。更多详情,请移步 2.源码。 话不多说,先上完整代码链接. 3.项目结构。

image.png

4.主要步骤

  1. 安装axios依赖:

image.png

2. src下新建api文件夹,用于存放axios的相关封装及其衍生api文件等。

3. api文件夹内创建request.js文件来创建axios实例及拦截等(附上主要代码,重点部分均有注释,elm组件库记得安装哦)。

image.png

image.png

image.png

  1. 创建xx.js文件用于具名模块的api统一管理和之后对应页面的调用。

image.png

  1. 在上一步的对应组件内引用并使用即可。

image.png


image.png

5.结语

以上是在vue中最简单的封装和使用,也是方便api接口的统一管理.更多更全面的封装及逻辑请前往查看对应API。


群贤毕至

访客