背景介绍:在今天的互联网世界,前后端分离的架构已经成为常态,而在这其中,API接口的作用至关重要。作为前后端沟通的桥梁,API接口确保了数据的顺利传递和业务逻辑的执行。而很多刚入门的编程爱好者可能跟我刚开始学习一样对这个概念一知半解,现在,我们就来聊聊API接口,它是如何工作的,以及为什么它对我们的开发项目至关重要。

本文以接口调用者和接口开发者的角度来编写了文章,欢迎大家指点!

1. 接口是什么?

我喜欢举一些例子来让自己更好的理解一个概念,希望这个例子能给你带来启发。

类比场景:你通过一个快递公司上门取件换货 📦【注意:这是站在一个调用API接口的角度】


1. 你(API接口调用者)准备好包裹(数据 ——> 比如请求报文、请求参数等)

        你准备好了要换的包裹打包好。这个包裹可能包含很多信息(比如博客内容、用户数据等)。

2. 打电话(发送请求,比如通过浏览器、Postman 等工具)快递员(API接口)

        你打电话告诉快递员包裹的内容和目的地(发出请求,比如通过 HTTP 请求发往服务器)。你会告诉快递员包裹的详细信息(请求参数),比如目标地址(URL)包裹类型(如 GETPOST 请求方式)

3. 快递员上门之后,通过后台(API提供商服务器的请求处理验证部分,通常是一些代码逻辑检查操作)查询数据是否能对上

        快递员接到你的电话后,他按照你提供的信息(请求数据)开始进行验证操作(验证请求信息,比如Token等)。他会按规定的流程去做,比如确认包裹的尺寸和物品、目的地等(验证请求参数)。

4. 快递员把包裹带到仓库(API提供商服务器)换货

        快递员把包裹带到仓库。仓库会根据包裹的信息进行处理,可能需要检查包裹的内容,或者做一些运送前的准备工作。服务器也会根据请求的类型来做出处理,比如查询数据库,或者处理某个请求

5. 仓库返回信息(响应结果)

        仓库会根据查询到的信息,来做出一定的响应,比如:“包裹已经成功存入仓库,准备发往目的地。” 或者,“没有找到目标信息。”这就是响应结果,它通常以 JSON 格式 返回,告诉你请求的结果是什么。

6. 快递员将包裹送回你的所在地(前端展示)

        最后,快递员将包裹送到你的所在地。前端将这些返回信息(响应结果)展示给用户,就像快递员把换的新包裹交到收件人手中一样。

API(Application Program Interface)即应用程序接口,这并不代表我们熟悉的编程语言中的接口(像 Java、Go 中的接口),而是一个通过特定协议(通常是HTTP)让不同系统之间互相“交谈”的方式。

2. 接口的作用

接口的核心作用就是实现前后端通信。换句话说,前端通过接口向后端发送请求,后端返回相应的数据。无论是网页、APP、还是小程序,接口的作用都是一样的,它们使得不同的前端与后端系统能够无缝衔接。具体来说,接口有以下几种常见的应用场景:

  • 前端与后端通信:浏览器网页通过 HTTP 请求从后端服务器获取数据。
  • 移动 APP:安卓和苹果 APP 通过接口与后端进行数据交互。
  • 小程序:微信小程序通过接口从服务器获取数据,更新界面内容。

3. 接口的组成

一个完整的 API 接口通常由以下几个部分组成:

  • 请求方法:例如 GETPOSTPUTDELETE 等,决定了我们进行什么样的操作。
  • 接口地址(URL):就是访问接口的路径,它像一张地址卡片,指向特定的服务或数据。
  • 请求参数:客户端需要传递给后端的数据。
  • 响应结果:服务器返回的结果,通常是 JSON 格式的数据。
3.1. 举个例子

假设你需要查询身份证信息,接口的地址和请求可能长成这样:

接口地址https://api.xxx.com/idcard/

  • 请求方式:GET / POST
  • 请求参数:身份证号码(id)
  • 响应参数:地址(addr)、出生日期(date)、性别(sex)
请求示例:
{
  "id": "123456"
}
响应示例:
{
  "addr": "中国 上海市",
  "date": "2000-01-01",
  "sex": "男",
}

这就是一个简单的 API 接口,它告诉我们如何通过指定请求参数(身份证号)向服务器发送请求,获取对应的响应数据(身份证地址、出生日期等)。

4. RESTful API:让接口更有规则

如果你曾经听说过RESTful API,你一定知道它的魅力所在!RESTful API 是一种常用的接口设计风格,它通过简单的URL路径和HTTP请求方法来操作资源。它遵循了一些简单而强大的规则,使得接口的设计更加规范和易于理解。

4.1. 规则示例
操作 请求类型 URL 返回
新增歌曲 POST /song 返回新生成的歌曲信息
删除歌曲 DELETE /song/10 返回一个空文档
修改歌曲 PUT /song/10 返回更新后的歌曲信息
获取所有歌曲 GET /song 返回歌曲列表数组
获取单个歌曲 GET /song/10 返回单个歌曲信息

在 RESTful API 中,URL 中的路径表示资源,而通过 HTTP 请求方法(如 GETPOSTPUTDELETE)来操作这些资源。比如,通过 POST 创建新的歌曲,使用 GET 获取歌曲列表,删除歌曲则使用 DELETE 请求。

5. json-server:快速搭建一个 API 服务 🏃‍♂️

如果你想自己搭建一个简单的 RESTful API 服务,json-server 是一个非常好用的工具,它可以帮助你在短短几分钟内搭建一个完整的 API 服务!🎉

5.1. 安装 json-server

只需使用 npm 安装:

npm install -g json-server
5.2. 创建 JSON 数据文件

你只需要编写一个简单的 db.json 文件,里面包含你需要的资源和数据。比如创建一个歌单:

{
  "song": [
    {
      "id": 1,
      "name": "稻香",
      "singer": "周杰伦"
    },
    {
      "id": 2,
      "name": "小酒窝",
      "singer": "林俊杰"
    },
    {
      "id": 3,
      "name": "你不要想起我",
      "singer": "田馥甄"
    }
  ]
}
5.3. 启动服务

在此文件的目录下运行以下命令:

json-server --watch db.json

这就能启动一个 RESTful API 服务,默认监听 3000 端口。你可以通过访问 http://localhost:3000/song 来查看所有歌曲。

这个库已经实现了响应的处理逻辑,会根据不同的请求方式(GET、POST、DELETE、PATCH等)和请求路径来进行不同的操作处理

6. 接口测试工具:助力你快速调试

接口开发时,使用测试工具是非常重要的,它可以帮助你快速验证接口是否正常工作。以下是常用的接口测试工具:

这些工具可以帮助你模拟请求,查看接口的响应内容,从而快速定位问题,确保接口的正常运行。


结语:API 接口让前后端更亲密 👫

接口的作用不可小觑,它不仅仅是数据传输的载体,更是前后端之间的“无缝衔接”!掌握了 API 接口的开发和调用,你可以在 前后端分离 的项目中如鱼得水,畅游在互联网的世界里

无论是简单的 GET 请求,还是复杂的 POST、PUT 操作,API 都能帮助我们实现不同功能。通过 RESTful API 设计的规范,你还可以使得接口更加易于维护、易于理解

接下来,不妨动手试试搭建一个自己的 API 服务,利用 json-server 快速创建一个 RESTful API,体验开发和测试的乐趣吧

如果你对接口有任何疑问,或者想聊聊技术相关的事儿,随时留言,我们一起交流。同时也欢迎大家分享一些好用的 API 提供网站或者是自己的 API。

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐