排队的API-DEV365 开发者社区

我们中的许多网络开发人员，前端开发人员，Fullstack开发人员已经使用REST API了。我也是这些开发人员之一，他们不断使用REST API作为我的Web应用程序。但是，每当我使用它们时，我经常希望我选择的库将在它们中有一个内置的队列来处理请求，请在网络问题或其他方面保持存储同时，一次一次处理1个请求时，以避免与数据的任何不一致。

为了使事情变得清晰，我不是最完美的开发人员，所以我经常犯错。那是我需要你们帮助的地方。我在HTTP库周围提出了一个小型包装器类和功能，我经常使用（AXIOS）实现排队系统。这不是最好的解决方案，但是有了一些更改和良好的优化。

如您在上面看到的，我通过创建一个以通用格式处理请求的API类，使事情变得非常简单，然后我创建了一个称为queuedAPI的函数，该函数将公开API类的API方法并排队它们进入队列。将其添加到队列中后，请求将以将其添加到队列的顺序中。我还确保查看客户是否具有导航器对象，以及在升级承诺之前是否已连接到Internet。如果我们没有连接到Internet，我们将继续寻找，直到浏览器连接到Internet为止。我知道这是性能密集的，但是我试图写一个观察者或找到限制重试的不同方法。一种方法可能是使用像RETRY_LIMIT = 5之类的限制变量或类似的东西。

我还有另一个想法是将队列存储在浏览器的本地存储中。这是因为，如果互联网丢失并且用户刷新页面，则队列将变为空。如果要将队列存储在本地存储中，那么我将能够在页面加载中访问它，并在页面刷新之前完成现有的队列请求。但这也意味着我将不得不找到一种方法来不存储API中通过的任何敏感信息，例如密码信息或付款信息。因此，如果开发人员希望将API存储在温度存储中，我将不得不避免使用这些API并在API中提供选项。

最后，我想为每个队列项目添加优先级，以便将队列列为优先级。

App.jsx

import { useEffect, useState } from "react";
import Button from "./components/Button";
import api from "./libs/api";

const App = () => {
  const [counter, setCounter] = useState(0);
  const [apiData, setApiData] = useState(null);
  const [online, setOnline] = useState(navigator.onLine??false);

  const handleClick = (method = 'get') => {
    setCounter(api.currentQueue.length + 1);
    let request = api.get;
    if (method === 'post') request = api.post;

    return request('https://62baf8ff573ca8f8328ff37d.mockapi.io/api/v1/users')
      .then((data) => setApiData(JSON.stringify(data)))
      .then(() => setCounter(prev => prev - 1))
      .catch((error) => console.log(error));
  }

  useEffect(() => {
    setInterval(() => {
      setOnline(navigator.onLine??false);
    }, 2000);
  }, []);

  const renderNetworkStatus = () => {
    if (online) {
      return <div className="flex justify-center items-center border-2 border-green-500 bg-green-50 rounded-full px-2">
        <div className="h-2 w-2 bg-green-500 rounded-full mr-1" />
        <div className="text-green-500 text-xs font-semibold mb-[0.5px]">online</div>
      </div>
    }
    return <div className="flex justify-center items-center border-2 border-red-500 bg-red-50 rounded-full px-2">
      <div className="h-2 w-2 bg-red-400 rounded-full mr-1" />
      <div className="text-red-500 text-xs font-semibold mb-[0.5px]">offline</div>
    </div>
  }

  return (
    <div className="h-full w-full flex justify-center items-center flex-col">
      <div className="text-3xl my-2">Requests Left in Queue: {counter}</div>
      <section className="flex justify-center align-center gap-2">
        <Button onClick={() => handleClick('get')}>Make get request</Button>
        <Button onClick={() => handleClick('post')}>Make post request</Button>
      </section>
      <div className="text-xs overflow-y-auto max-h-[400px] p-4">{apiData}</div>
      <div className="absolute bottom-3">{renderNetworkStatus()}</div>
    </div>
  );
}

export default App;

当我们请求API但未连接到Internet时，我还添加了一个小队的小视频剪辑，然后在我们再次连接时如何按顺序执行。

您觉得可以做出任何优化或重构来使其变得更好或更快，请在评论中告诉我。

，如果您喜欢这个想法 https://gist.github.com/SoorajSNBlaze333/e6cd7d3103272af7298b4414cd19b024