webstorm前端调用后端接口_接口笔记同步异步交互理解

本文介绍了接口的概念、接口文档的编写规范,重点解析了接口同步交互和异步交互的区别,通过同步模式下数据文件查询下载的实例,展示了同步交互的等待过程,而异步模式则提供了更好的用户体验,允许在处理期间用户继续其他操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一,      接口简介

软件开发中,接口是一个非常重要的概念。所谓接口,是指两个对象进行通信的方式和协议。

在软件设计领域,小到一个软件模块,大到一个软件系统,都会有若干接口,实现不同模块、不同系统之间的通信。

每个接口都应该事先一个具体的功能,接口需要有明确的输入,以及明确的输出(也可以输出为Null)。例如,调用单据字段查询接口时,需要传入单据内部ID,执行后返回单据字段值。

在不同的团队,跨模块的软件开发中,接口的设计需要在最初的设计方案时就协商好,然后各方团队各自开发,在约定的时间一起连调,进行集成测试。

API (Application Programming Interface)即应用程序接口,可以是一个软件组件或者一个Web服务与外界进行交互的接口。

bbc0401e1810239783dcbcbef71cec1f.png

在Web后端开发中,接口接受前端(Browser,App, Client)传入的数据,处理之后要么返回给前端数据(JSON)要么将数据存储到数据库中(MySQL, Redis)

二,      接口文档

接口文档又叫(规范性文档)。接口文档有规范的格式和内容要求,后端按照接口协议接收前端传递的合法数据和返回符合的规范的数据,前端按照接口协议传递符合规范的数据和对后端返回的数据依据展示的需要做处理

三,      接口文档编写规范

1.   内容

-       文档包括以下内容:

-       接口说明

-       请求方式(GET/POST/RETRIEVE/UPDATE)

-       调用URL(接口地址)

-       请求参数,包含参数类型及其限制条件

-       返回参数说明(返回包结构体)

2.   示例

接口说明:注册接口/创建单据接口/查询接口等

6bbfc5b5f7857f01536d188d59376e02.png

返回数据:JSON

46536090f682744cbb4ef860e174c222.png

四,    理解接口同步异步交互模式

接口之间的调用模式分为同步交互模式和异步交互模式两种。

-同步交互模式

同步交互:指发送一个请求,需要等待返回,然后才能够发送下一个请求,有个等待过程;

同步的思想是:所有的操作都做完,才返回给用户。这样用户在线等待的时间太长,给用户一种卡死了的感觉(就是系统迁移中,点击了迁移,界面就不动了,但是程序还在执行,卡死了的感觉)。这种情况下,用户不能关闭界面,如果关闭了,即迁移程序就中断了。

同步,是所有的操作都做完,才返回给用户结果。

e2bd1023eca7243527cbc334258fb28a.png

采用同步调用模式的数据文件查询下载页面的设计案例。在该页面中,用户查询并下载csv文件,如下图所示。

具体交互与系统处理步骤如下:

1)    用户设置好查询条件,点击“下载”按钮;

2)    “下载”按钮会以同步模式调用后台数据查询接口,将前端用户填写的日期作为参数传递给后端服务接口;

3)    后端服务拼写SQL查询语句,执行SQL语句并等待数据库返回结果;

4)    数据库返回结果后,后端服务接口组装数据,生成csv文件,并返回给前端浏览器。在这个过程中,用户在浏览器端一直处于等待状态(浏览器左下角可能会有提示文字:等待服务器响应);

5)    浏览器收到服务器返回的数据文件,弹出窗口,提示用户选择文件的保存位置,并执行文件下载操作。

07877dd8be0ccc44918ed3d6e8e05c33.png

-异步交互模式

异步交互:指发送一个请求,不需要等待返回,随时可以再发送下一个请求,即不需要等待。 

区别:一个需要等待,一个不需要等待,在部分情况下,我们的项目开发中都会优先选择不需要等待的异步交互方式。

将用户请求放入消息队列,并反馈给用户,系统迁移程序已经启动,你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉,会告诉你,你的请求系统已经响应了。你可以关闭界面了。

17b04e01ed4c4eaadff1b9b8066b5fa4.png

一般耗时比较长的处理工作会采用异步调用模式,调用方会给被调用方提供一个回调接口,意思是“你处理时间比较长,等你处理完以后,再调用这个回调接口,通知我接口吧!”

我们依然以文件查询下载为例来看看异步调用模式下的产品设计。在上一个案例中,数据查询有可能非常耗时,如果让用户停留在前端页面等待,体验并不友好,所以我们考虑对功能进行改进,通过异步调用模式重新设计功能,交互效果如下图所示,具体执行步骤如下:

1.    用户设置好查询条件,点击“下载”按钮。

2.    前端提示“下载任务已提交,请耐心等待。”后端的下载任务调度管理程序开始执行,在数据库生成一条状态“处理中”的任务记录,同时异步调用后端数据查询服务接口,并提供回调接口。

3.    后端服务接口拼写SQL语句并执行,数据库返回结果后,程序将数据处理成csv格式,保存在服务器,并调用回调接口,后端服务接口程序执行结束,将任务状态更新为“成功”,并提供数据下载的链接。

4.    如果后端服务接口长时间没有得到数据库返回结果,超过规定时间后,下载任务调度管理程序会将任务状态更新为“失败”。

21d4c43b25467891171477cc62c84b5c.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值