有没有办法检测反应中的API调用？

Question

我想为react组件中进行的每个API调用实现加载微调器/栏。不同于在请求/响应期间以布尔状态实现它的典型方法，有没有一种方法可以使React在HOC中实际检测到它？就像如何通过使用ajaxStatus primefaces在XHTML中实现它。

Answer 1

如果您使用Axios进行API调用，请尝试使用axios-progress-bar软件包。

它自动运行，使用Axios检测每个API调用。

它也非常易于使用。

与Axios一起使用，要实现三个步骤：

S1。照常添加这些软件包

yarn add axios
yarn add axios-progress-bar

S2。在index.js中，添加以下行：

import { loadProgressBar } from 'axios-progress-bar'
loadProgressBar()

S3。在index.html中，添加以下行：

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/nprogress.css" />

Answer 2

如this long-standing question中所述，可以通过修补可以执行HTTP请求的API XMLHttpRequest和fetch来完成此操作。不建议出于个人目的以非标准方式更改全局行为。

为了密切关注请求，应该使用对开始和结束请求进行计数的代码来扩展API调用。设置布尔状态还不够，因为可能会同时发出请求。

Axios是著名的库，它提供了执行此操作的功能。它是根据AngularJS $http建模的，并引入了拦截器的概念，该拦截器可用于指定目的，而无需包装每个HTTP请求API调用。

在另一个答案中链接的

axios-progress-bar是Axios如何完成此操作的一个很好的例子。当计数器值从0变为反向时，基本上是sets up an interceptor to count requests and notify progress bar component。只需很少的更改即可使用React组件，而不是非React进度条。