技术实践丨如何解决异步接口请求快慢不均导致的数据错误问题？

摘要：实时查找都会面临一个通用的问题，便是浏览器央求后台接口都是异步的，假定先建议央求的接口后回来数据，列表/表格中闪现的数据就很或许会是紊乱的。

本文同享自华为云社区《怎样处理异步接口央求快慢不均导致的数据过失问题appear？》输入框测试用例，原文作者：Kagol 。

导语

查找功用，我想许多业务都会触及，输入框跑到上面了怎样办这个功用的特点是：

用户能够在输入框中输入一个关键字，然后在一个列表中闪现该关键字对应的数据；
输入框是能够随时批改/删去悉数或部分关键字的；
假定是实时查输入框变小了怎样回事找（即输入完关键字立刻出作用，不需求额定的操作或过多的等候），接口调用将会十分一再。

实时查找都会面临一个通用的问题，便是：

浏览器央求后台接口都是异步的，假定先建议央求的接口后回来数据，列表/表格中闪现的数据就很或许会是紊乱的。

问题重现

最近查验提了一个查找（PS：此处的查找便是用 DevUI 新推出的 CategorySearch输入框怎样调巨细组件完成的）相关的缺点单，就触及到了上述问题。

这个bug单大致意思是：

查找的时分，接连快速输入或许删去关键字json解析，查找作用和查找关键字不匹配。

从缺点浏览器单的截图来看，本意是要查找关键字8.4.7迭代】，表格中的实践查找作用是8.4.7迭代】过关键字的数据。

缺点单的截图还十分贴心肠输入框变小了了贴了两次央求的信息：

作为一名“有经历的”前端开发，一看便是一个通用的技能问题：

浏览appstore器从服务器建议的央求都app装置下载是异步的approach；
因为前一次央求服务器回来比较慢，还没等第一次央求回来作用，后一次央求就建议ios14了，而且敏捷回来了作用，ios14这时表格必定闪现后一次的作用；
过了2秒，第一次央求的作用才慢吞吞地回来了，这时表格过失地又闪现了第一次央求的作用；
毕竟导致了这个bug。

怎样处理呢？

在想处理计划之前，得想办法必现这个问题，靠后台接口是不现实的，大部分情况下后台接口都会很快回来作用。

所以要必现这个问题，得先模仿ios退款慢接口。

模仿慢输入框怎样调巨细接口

为了快速树立ios14桌面布局图片一个后台服务，并模仿慢接口，咱们选择 Koa 这个轻量的 Node 结构。

快速开端

Koa 运用起来十分便利，只需浏览器的前史求：

新建项目文件夹：mkdir koa-server
创立 packagjsonobjecte.json：npm init -y
设备 Koa：npm i koa
编写服务代码：vi apappreciatep.js
建议：node app.js
拜访：http://ljsonoc浏览器拜访过于频繁不能用alhost:3000/

编写服务代码

运用以下指令创立 app.js 建议文件：

vi app.js

在文件中输入以下 3 行代码，即可建议一个 Koa 服务：

const Koa = require('koa'); // 引进 Koa
const app = new Koa(); // 创立 Koa 实例
app.listen(3000); // 监听 3000 端口

拜访

假定没有在3000端口建议使命服务，在approve浏览器拜访：

http://localhost:3000/

会闪现以下页面：

建议了咱们的 Koa Server 之后，拜访：

http://loc输入框跑到上面了怎样办alhost:3000/

会闪现：

get 央求

刚才树立的仅仅一个空服务，什么路由都没有，所以闪现了Not Found。

咱们能够经过中心件的办法，让咱们的 Koa Serios14.4.1更新了什么ver 闪现点儿东西。

因为要添加一个根路由，咱们先设备路由依托

npm i koa-router

然后json格局引进 Koa Route浏览器前史记录设置r

const router = require('koa-router')()浏览器前史上的痕迹在哪里;

接着是编写get接口

apios退款p.get('/', async (ctx, next) => {
ctx.response.approvebody = '<p>Hjsonpello Koa Server!</p>';
});

终究别忘了运用路由中心件

app.use(router.routes());

改完代码需求重启 Koa 服务，为了便利重启，咱们运用 pm2 这个 Node 进程ios退款管理工具来建议/重启 Koa 服务，运用起来也十分简略：

大局设备 pm2：npm i -g pm2
建议 Koa Server：pm2 start app.js
重启 Koa Server：pm2 restart app.js

重启完 Koa Server，再次拜访

httAPPp://localhost:3000/

会闪现以下内容：

post 央求

有了以上根底，就能够写一个 post 接口，模仿慢ios下载接口啦！

编写 post 接口和 get 接口很类似：

router.post('/geios8备忘录tList', async (ctx, next) => {
ctx.response.body = {
status: 200,
msg: '这是post接口回来的查验数据',
data: [1,ios8备忘录 2, 3]
};
});

这时咱们能够运用 Postman 调用下这个 post 接口，如期回来：

容许跨域

咱们测验在 NG CLI 项目里调用这个 post 接口：

this.http.post('http输入框图片://local输入框跑到上面了怎样办host:3000/getList', {
id: 1,
}).subscribe(result =&g浏览器前史记录设置t; {
console.log('result:', result);
});

但是在浏览器里直接调用，却得不到想要浏览器前史记录删了怎样找回的作用：

result 没有打印出来
控制台报错
Network央求也是赤色的

因为本地发appreciate起的项目端口号（4200）和 Koa Server 的（3000）不同，浏览器以为这个接口跨域，因此阻挠了。

NG CLI 项ios8备忘录目本地链接：

httpapp装置下载://localhost:app装置下载4200/

Koa Server 链接：

http://localhost:3000/

Koa 有一个中心件能够容许跨域：koa2-cors

这个中心件的运用办法，和路由中心件很类似。

先设备依托浏览器怎样翻开网站：

npm i koa2-cors

然后引进：

const cors = require('koa2-cors');

再运用中心apple件：

app.use(cors());

这时咱们再去拜访：

http://localhjson转mapost:4json解析200/

就能得到想要的作用啦！

慢接口

post 接口现已有了，怎样模仿慢接口呢？

其实便是希望json服务器推延回来作用。

在 post 接口ios8备忘录之前添加推延的逻辑：

  async function delay(time) {
return new Prjson格局omise(function(resolve, reject) {
setTime输入框测试用例out(function() {
resolve();
}, time浏览器前史上的痕迹在哪里);
});
}
await delay(5iOS000); // 推延 5s 回来作用
ctx.response.body = { ... }json解析;ios14.4.1更新了什么

再次拜访 giOSetList 接口，发现前面接口会一向pending，5s 多才真正回来作用。

撤消慢接口央求

能模仿慢接口，就能轻易地必现jsonp跨域原理查验提的问题啦！

先必现这个问题，然后测验批改这个问题，终究看下这个问题还出不呈现，不呈现说明咱们的计划能处理这个bug，问题还ios体系有说明咱们得想其他办法。

这是批改bug正确的翻开办法。

最直观的计划便是再建议第浏览器怎样翻开网站2次央求之后，假定第一次央求未回来，那就直接撤消这次央求，运用第2次央求浏览器的回来作用。

怎样撤消一次http央求呢json解析？

Angular 的异步事情机appreciate制是依据 RxJS 的，撤消一个正在履行的 http 央求十分便利。

前面现已看到 Angular 运用 HttpClient 服务来建议 http 央求，并调用subscribe 办法来订阅后台的回来作用：

this.http.post('http://localhost:3000/getList', {
id: 1,
}).subs浏览器前史记录设置cribe(result => {
console.log('result:', result);
});approach

要撤消 http 央求，咱们需求先把这个订阅存到组件一个变量里：

private getListSubscription: Subscriptioios14n;
this.getListSubscription = thijsonobjects.http.post('http://localhost:3000/getList', {
id: 1,
}).subscribe(result => {
coappstorensole.浏览器的浏览前史怎样删除log('result:', result);
});

然后在从头建议 http 央求之前，撤消上一次央求的订阅即可。

this.getListSubscript浏览器怎样翻开网站ion?.unsubscribe(); // 从头建议 http 央求approve之前，撤消上一次央求的订阅
this.getListSubscription = this.http.post(...);

其他 http 库怎ios体系样撤消央求

至此这个缺点算是处理了，其实这是一个通用的问题，不管是在什么业务，运用什么结构，都会遇到异步接口慢导致的数据紊乱问题。

那么，假定运用 fetch 这种浏览器原生的 http 央求接appointment口或许 axios 这种业界广泛运用的 http 库，怎样吊输入框变小了怎样回事销正在进行的 http 央求呢？

fetch

先来看下 fetch，fetch 是浏览器原生供应的 AJAX 接口，运用起来approach也十分便利。

运用输入框怎样调巨细 fetch 建议一个 post 央求：

fetch('http://localhost:3000/getList', {
method: 'POST',
　　headers: {
　　　　'Conte浏览器前史记录设置nt-Type': 'application/json;charset=utf-8'
　　},
　json格局怎样翻开　body: JSON.stringify({
id: 1
　　})
}).then(rejson格局怎样翻开sult => {
console.log('result', result);
})输入框测试用例;

能够运用 AbortController 来完成央apple求撤消：

thi浏览器前史记录设置s.controller?.abort(); // 从头建议 http 央求之前，撤消ios8备忘录上一次央求
const controller = new AbortController(); //  创立 AbortController 实例
const signal = controller.signal;
this.control浏览器怎样查看前史浏览记录ler = contro浏览器看过的视频在哪里ller;
fetch('http://localjsonobjecthost:3000/getList', {
method: 'POST',
　　headers: {输入框变小了了
　　　　'Content-Type':json文件是干什么的 'application/json;cjsonharset=utf-8'
　　},
　　body: JSON.stringify({
id: 1
　　}),
si浏览器下载gnal, // 信号参数，用来控输入框变小了了制 http 央求的履行
}).then(result => {
console.log('result', result);
})json格局;

axios

再来看看 axios，输入框代码先看下怎样运用 axios 建议 post 央求。

先设备：

npm i axios

再输入框图片引进输入框输入文字触发事情：

import axios from 'axios';

建议 post 央求：

axios.post('http://localhost:3000/getList',appointment {
headers: {
'Conten浏览器的前史t-Tyappointmentpe': 'applicatAPPion/json;charset=utf-8'
},
datjson是什么意思a: {输入框输入文字触发事情
id: 1,
},
})
.then(result => {
console.log('result:'jsonobject, result);
});

axios 建议的央求能够经过 cios模拟器ancelToken 来撤消。

this.source?.cancel('The request is canceled!');
this.source = axios.CancelTo输入框跑到上面了怎样办ken.source输入框变小了了(); // 初始化 source 政策
axios.post('http://localjsonp跨域原理host:3000/getList', {
headers: {
'Conte浏览器的前史nt-Type': 'application/json;charset=utf-8'
}appreciate,
data: {
id: 1,
}ios下载,
}, { // 留意是第三个参数
cancelToken浏览器看过的视频在哪里: this.source.token,appointment // 这儿声明的 cancelToken 其实恰当所浏览器前史上的痕迹在哪里以一个符号或许信号
})
.then(result => {
console.log('resu输入框跑到上面了怎样办lt:', result);
});

小结

本文经过实践项目中遇到的问题，总结缺点剖析和处理的通用办法，并对异步接口央求导致的数据json过失问题进行了深化的解析。

点击重视，第一时间了解华为云新鲜技能~

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

技术实践丨如何解决异步接口请求快慢不均导致的数据错误问题？

导语

问题重现

模仿慢输入框怎样调巨细接口

编写服务代码

拜访

get 央求

post 央求

容许跨域

慢接口

撤消慢接口央求

其他 http 库怎ios体系样撤消央求

fetch

axios

小结

评论(0)

提示：请文明发言取消回复

近期文章

近期评论

技术实践丨如何解决异步接口请求快慢不均导致的数据错误问题？

导语

问题重现

模仿慢输入框怎样调巨细接口

编写服务代码

拜访

get 央求

post 央求

容许跨域

慢接口

撤消慢接口央求

其他 http 库怎ios体系样撤消央求

fetch

axios

小结

评论(0)

提示：请文明发言 取消回复

近期文章

近期评论

提示：请文明发言取消回复