DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸灵活至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB工具类产品,DevUI 将是一个很不错的选择!

Kagol.png

引言

搜索功能,我想很多业务都会涉及,这个功能的特点是:

  • 用户可以在输入框中输入一个关键字,然后在一个列表中显示该关键字对应的数据;
  • 输入框是可以随时修改/删除全部或部分关键字的;
  • 如果是实时搜索🔍(即输入完关键字马上出结果,不需要额外的操作或过多的等待),接口调用将会非常频繁。

实时搜索都会面临一个通用的问题,就是:

浏览器请求后台接口都是异步的,如果先发起请求的接口后返回数据,列表/表格中显示的数据就很可能会是错乱的。

问题重现

最近测试提了一个搜索(PS:此处的搜索🔍就是用 DevUI 新推出的 CategorySearch 组件实现的)相关的缺陷单,就涉及到了上述问题。

1-1.png

这个bug单大致意思是:

搜索的时候,连续快速输入或者删除关键字,搜索结果和搜索关键字不匹配。

从缺陷单的截图来看,本意是要搜索关键字8.4.7迭代】,表格中的实际搜索结果是8.4.7迭代】过关键字的数据。

缺陷单的截图还非常贴心地贴了两次请求的信息:

2.png

作为一名“有经验的”前端开发,一看就是一个通用的技术问题:

  1. 浏览器从服务器发起的请求都是异步的;
  2. 由于前一次请求服务器返回比较慢,还没等第一次请求返回结果,后一次请求就发起了,并且迅速返回了结果,这时表格肯定显示后一次的结果;
  3. 过了2秒,第一次请求的结果才慢吞吞地返回了,这时表格错误地又显示了第一次请求的结果;
  4. 最终导致了这个bug。

怎么解决呢?

在想解决方案之前,得想办法必现这个问题,靠后台接口是不现实的,大部分情况下后台接口都会很快返回结果。

所以要必现这个问题,得先模拟慢接口。

模拟慢接口

为了快速搭建一个后台服务,并模拟慢接口,我们选择 Koa 这个轻量的 Node 框架。

快速开始

Koa 使用起来非常方便,只需要:

  1. 新建项目文件夹:mkdir koa-server
  2. 创建 package.json:npm init -y
  3. 安装 Koa:npm i koa
  4. 编写服务代码:vi app.js
  5. 启动:node app.js
  6. 访问:http://localhost:3000/

编写服务代码

使用以下命令创建 app.js 启动文件:

vi app.js

在文件中输入以下 3 行代码,即可启动一个 Koa 服务:

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

访问

如果没有在3000端口启动任务服务,在浏览器访问:

http://localhost:3000/

会显示以下页面:

3.png

启动了我们的 Koa Server 之后,访问:

http://localhost:3000/

会显示:

4.png

get 请求

刚才搭建的只是一个空服务,什么路由都没有,所以显示了Not Found

我们可以通过中间件的方式,让我们的 Koa Server 显示点儿东西。

由于要增加一个根路由,我们先安装路由依赖

npm i koa-router

然后引入 Koa Router

const router = require('koa-router')();

接着是编写get接口

app.get('/', async (ctx, next) => {
  ctx.response.body = '<p>Hello Koa Server!</p>';
});

最后别忘了使用路由中间件

app.use(router.routes());

改完代码需要重启 Koa 服务,为了方便重启,我们使用 pm2 这个 Node 进程管理工具来启动/重启 Koa 服务,使用起来也非常简单:

  • 全局安装 pm2:npm i -g pm2
  • 启动 Koa Server:pm2 start app.js
  • 重启 Koa Server:pm2 restart app.js

重启完 Koa Server,再次访问

http://localhost:3000/

会显示以下内容:

4-1.png

post 请求

有了以上基础,就可以写一个 post 接口,模拟慢接口啦!

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

router.post('/getList', async (ctx, next) => {
  ctx.response.body = {
    status: 200,
    msg: '这是post接口返回的测试数据',
    data: [1, 2, 3]
  };
});

这时我们可以使用 Postman 调用下这个 post 接口,如期返回:

5.png

允许跨域

我们尝试在 NG CLI 项目里调用这个 post 接口:

this.http.post('http://localhost:3000/getList', {
  id: 1,
}).subscribe(result => {
  console.log('result:', result);
});

但是在浏览器里直接调用,却得不到想要的结果:

  • result 没有打印出来
  • 控制台报错
  • Network请求也是红色的

6.png

由于本地启动的项目端口号(4200)和 Koa Server 的(3000)不同,浏览器认为这个接口跨域,因此拦截了。

NG CLI 项目本地链接:

http://localhost:4200/

Koa Server 链接:

http://localhost:3000/

Koa 有一个中间件可以允许跨域:koa2-cors

这个中间件的使用方式,和路由中间件很类似。

先安装依赖:

npm i koa2-cors

然后引入:

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

再使用中间件:

app.use(cors());

这时我们再去访问:

http://localhost:4200/

就能得到想要的结果啦!

7.png

慢接口

post 接口已经有了,怎么模拟慢接口呢?

其实就是希望服务器延迟返回结果。

在 post 接口之前增加延迟的逻辑:

  async function delay(time) {
    return new Promise(function(resolve, reject) { 
      setTimeout(function() {
        resolve();
      }, time);
    });
  }

  await delay(5000); // 延迟 5s 返回结果

  ctx.response.body = { ... };

再次访问 getList 接口,发现前面接口会一直pending,5s 多才真正返回结果。

8.png

9.png

取消慢接口请求

能模拟慢接口,就能轻易地必现测试提的问题啦!

先必现这个问题,然后尝试修复这个问题,最后看下这个问题还出不出现,不出现说明我们的方案能解决这个bug,问题还有说明我们得想别的办法。

这是修复bug正确的打开方式。

最直观的方案就是再发起第二次请求之后,如果第一次请求未返回,那就直接取消这次请求,使用第二次请求的返回结果。

怎么取消一次http请求呢?

Angular 的异步事件机制是基于 RxJS 的,取消一个正在执行的 http 请求非常方便。

前面已经看到 Angular 使用 HttpClient 服务来发起 http 请求,并调用subscribe 方法来订阅后台的返回结果:

this.http.post('http://localhost:3000/getList', {
  id: 1,
}).subscribe(result => {
  console.log('result:', result);
});

要取消 http 请求,我们需要先把这个订阅存到组件一个变量里:

private getListSubscription: Subscription;

this.getListSubscription = this.http.post('http://localhost:3000/getList', {
  id: 1,
}).subscribe(result => {
  console.log('result:', result);
});

然后在重新发起 http 请求之前,取消上一次请求的订阅即可。

this.getListSubscription?.unsubscribe(); // 重新发起 http 请求之前,取消上一次请求的订阅

this.getListSubscription = this.http.post(...);

其他 http 库如何取消请求

至此这个缺陷算是解决了,其实这是一个通用的问题,不管是在什么业务,使用什么框架,都会遇到异步接口慢导致的数据错乱问题。

那么,如果使用 fetch 这种浏览器原生的 http 请求接口或者 axios 这种业界广泛使用的 http 库,怎么取消正在进行的 http 请求呢?

fetch

先来看下 fetch,fetch 是浏览器原生提供的 AJAX 接口,使用起来也非常方便。

使用 fetch 发起一个 post 请求:

fetch('http://localhost:3000/getList', {
   method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify({
    id: 1
  })
}).then(result => {
  console.log('result', result);
});

可以使用 AbortController 来实现请求取消:

this.controller?.abort(); // 重新发起 http 请求之前,取消上一次请求

const controller = new AbortController(); //  创建 AbortController 实例
const signal = controller.signal;
this.controller = controller;

fetch('http://localhost:3000/getList', {
   method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify({
    id: 1
  }),
  signal, // 信号参数,用来控制 http 请求的执行
}).then(result => {
  console.log('result', result);
});

axios

再来看看 axios,先看下如何使用 axios 发起 post 请求。

先安装:

npm i axios

再引入:

import axios from 'axios';

发起 post 请求:

axios.post('http://localhost:3000/getList', {
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  data: {
    id: 1,
  },
})
.then(result => {
  console.log('result:', result);
});

axios 发起的请求可以通过 cancelToken 来取消。

this.source?.cancel('The request is canceled!');

this.source = axios.CancelToken.source(); // 初始化 source 对象

axios.post('http://localhost:3000/getList', {
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  data: {
    id: 1,
  },
}, { // 注意是第三个参数
  cancelToken: this.source.token, // 这里声明的 cancelToken 其实相当于是一个标记或者信号
})
.then(result => {
  console.log('result:', result);
});

小结

本文通过实际项目中遇到的问题,总结缺陷分析和解决的通用方法,并对异步接口请求导致的数据错误问题进行了深入的解析。

加入我们

我们是DevUI团队,欢迎来这里和我们一起打造优雅高效的人机设计/研发体系。招聘邮箱:muyang2@huawei.com。

文/DevUI Kagol

往期文章推荐

《号外号外!DevUI Admin V1.0 发布啦!》

《让我们一起建设 Vue DevUI 项目吧!🥳 》

《CategorySearch分类搜索组件初体验》

《对DevUI组件库王哥的专访》

《2021年最值得推荐的7个Angular前端组件库》


DevUI团队
714 声望810 粉丝

DevUI,致力于打造业界领先的企业级UI组件库。[链接]