Vue 项目 API 接口封装1

简介: Vue 项目 API 接口封装1

一、前言

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

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

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

// 拿取货物数据
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 文档,举个例子,假设有以下几个模块:

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

回想前言中提到的第三个问题——模块过于扁平化,无法区分接口属于哪个功能模块,无法区分请求含义。

如何让我们在发请求时更清晰地分辨接口呢?

// 拿取货物数据
fetchGoodsData () {
  return this.$api.goods.fetchGoodsData()
}


3.jpg


如上图,只是观察函数调用即可明确功能模块、请求的具体含义。

与此同时还解决了第一个问题——永久性冗余,冗余的信息被封装到了 axios 实例中。

对于第二个问题——请求参数过多,认知负担增加,我们把需要传递的数据传进去即可,像这样:

// 拿取货物数据
fetchCartsData (params) {
  return this.$api.carts.fetchCartsData(params)
}
// 获取所有购物车数据,不分页
fetchCartsData({
    pages: 1,
    size: -1
})
.then(data => {
    // ...
})
.catch(e => console.error(e))

看到这里,如果你是一位新手,应该会一头雾水,那就对了。因为也许你并不知道http://xxx.yyy.zzz:3000/api/product1/v1/ 去哪了,也不知道 ?page=1&size=-1 怎么就突然作为参数传到封装好的 API 函数里去了。

Take it easy,just go on.


三、Axios

我们简单过一下 Axios —— 基于 Promise 的 HTTP 客户端,可用于浏览器和 node.js,还可以拦截请求和响应,转化请求和响应数据,取消请求,自动转换 JSON 数据,防御 XSRF 攻击……

简而言之,它可以帮你获取数据,请求和响应时帮你拦截数据,总是返回一个 Promise,然后你从 Promise 里拿到数据,整理后展示到页面上。


2.jpg


回到第二节末尾提出的问题: http://xxx.yyy.zzz:3000/api/product1/v1/ 去哪了??page=1&size=-1 去哪了?它们都被放进了 axios 实例中。具体来说,前者被放到了 baseURL 中,后者以对象的形式被放到了 params 中。参考链接:axios-http.com/docs/req_co…

如下图,一个 axios 实例主要由两个部分组成:拦截器、配置。


1.jpg


在正常的开发中,前端可能需要连接不同环境进行接口联调,因此其中,http://xxx.yyy.zzz:3000/api/product1/v1/ 作为 baseURL 就不能写死,需要根据本地服务器的模式来进行转换。

打个比方,如果是开发环境,baseURL 切换为 http://192.168.1.1:30000;如果是测试环境,baseURL 切换为 http://192.168.1.3:40000。因此,我们只要将 baseURL 的地址写在环境变量中就可以了。

现在我们需要设置模式及其环境变量,之后通过 process.env 就可以获取到对应变量。


四、模式与环境变量

VueCLI 提供了几种默认的模式,但是一般我们都会自己自定义。

通过 --mode 可以定义模式,例如,我要定义测试模式(其他模式以此类推)。

打开 package.json,找到 scripts 这一项,添加测试模式:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "test": "vue-cli-service serve --mode test"
}

另外,我们需要在根目录下(和 src 目录同级)新建一个 .env.test 文件,用来保存环境变量:

NODE_ENV = 'test'
VUE_APP_BASE_URL = 'http://192.168.1.3:4000'

之后,来到 main.js 中,添加一条 console.log(process.env);

打开控制台,执行命令:npm run test

项目运行后,在浏览器的控制台中就能看到 process.env 里保存着 NODE_ENV 和 VUE_APP_BASE_URL。


.jpg


有了这两个变量,模式和环境变量就有了对应关系。然后将 process.env.VUE_APP_BASE_URL 赋值给 axios 实例的 baseURL,就能实现 baseURL 的灵活转换。

补充几点:

  • mode 的参数与 .env 文件后缀有关系。
.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略
  • VUE_APP_* 是 VueCLI 通过 webpack.DefinePlugin 静态地嵌入到客户端侧 的代码中的。
  • 更多的疑惑,参考这篇文章:cli.vuejs.org/zh/guide/mo…

五、Axios 封装

Axios 的封装需要管理两件事情:一是创建实例,二是设置拦截器。

找到 utils 目录,在里面新建 request.js

5.1 创建实例

  • axios-http.com/docs/instan…
import axios from 'axios'
// create an axios instance: <https://axios-http.com/docs/instance>
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL,
    timeout: 10 * 1000
})
export default service

可以看到这里的 baseURL 用的是就是对应模式下的环境变量了。

5.2 请求拦截器 & 响应拦截器

  • axios-http.com/docs/interc…
// ...
// request interceptor: <https://axios-http.com/docs/interceptors>
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        return Promise.reject(error)
    }
)
service.interceptors.response.use(
    response => {
        return response
    },
    error => {
        return Promise.reject(error)
    }
)
// ...

到此,axios 实例就准备完毕了,有 baseURL,有拦截器。

axios 的封装与本文主题无关,所以写得很简单。但是这里也给大家提供一篇参考。这是另外一种思维方式,也值得学习:developpaper.com/encapsulati…

目录
相关文章
|
16天前
|
NoSQL 安全 API
如何有效提升 API 接口的安全性?
**API安全关键在于验证和防刷。通过排序参数、生成签名和MD5加密确保请求合法性。使用Redis限制请求频率,防止接口被恶意刷取。验证和防刷策略结合,保护API免受攻击和滥用。**
37 0
|
4天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
19 4
|
17天前
|
JavaScript
文本,wangEditor5的基本使用,开发文档地址,wangEditor5用于Vue3项目,想要使用好wangEditor项目,得看开发文档
文本,wangEditor5的基本使用,开发文档地址,wangEditor5用于Vue3项目,想要使用好wangEditor项目,得看开发文档
|
21天前
|
JSON 安全 API
如何高效编写API接口:以Python与Flask为例
构建RESTful API的简明教程:使用Python的Flask框架,从环境准备(安装Python,设置虚拟环境,安装Flask)到编写首个API(包括获取用户列表和单个用户信息的路由)。运行API服务器并测试在`http://127.0.0.1:5000/users`。进阶话题包括安全、数据库集成、API文档生成和性能优化。【6月更文挑战第27天】
45 7
|
18天前
|
Java API PHP
【亲测有效,官方提供】php版本企查查api接口请求示例代码,php请求企查查api接口,thinkphp请求企查查api接口
【亲测有效,官方提供】php版本企查查api接口请求示例代码,php请求企查查api接口,thinkphp请求企查查api接口
30 1
|
21天前
|
JSON 安全 API
实战指南:使用PHP构建高性能API接口服务端
构建RESTful API的简要指南:使用PHP和Laravel,先安装Laravel并配置数据库,接着在`api.php`中定义资源路由,创建`PostController`处理CRUD操作,定义`Post`模型与数据库交互。使用Postman测试API功能,如创建文章。别忘了关注安全性、错误处理和性能优化。
34 2
|
2天前
|
供应链 搜索推荐 数据挖掘
微店商品详情数据接口(micro.item_get)丨微店API接口指南
`micro.item_get`接口是微店API的关键工具,让开发者能获取商品详情,包括名称、价格、描述、图片、销量和SKU,用于电商同步、数据分析、个性化营销和提升购物体验。此接口加速了数据驱动的决策和业务优化。
6 0
|
4天前
|
JSON 监控 API
2024年7月免费天气API接口推荐
天气API对于开发人员来说是构建响应更快、安全性更高的应用程序的有力工具。使用天气API可以帮助开发者提供出色的用户体验,实现高效的数据管理。
27 0
|
12天前
|
存储 监控 API
解锁京东 APP 商品详情的 API 接口获取方法
在数字化商业环境中,获取京东APP商品详情的API接口至关重要。这有助于电商数据分析、价格监控、商品推荐等。API接口提供高效、稳定且合规的数据源,允许快速获取大量商品信息。要使用接口,需注册开发者账号、了解接口文档并进行开发调试。示例代码展示了Python如何调用接口。同时,注意遵守规则、处理数据安全及接口更新。利用API能提升业务效率,但需在合法合规下进行。
|
15天前
|
JavaScript
vue3 【实战】封装 “心跳“ 组件
vue3 【实战】封装 “心跳“ 组件
18 0