redux observable 和 ajax 中的基础拦截器

Question

我有一个关于 redux observable 和 ajax 请求的问题。

自从我开始学习 React 以来，我一直在使用 redux observable。

所以我其实想问有没有办法拦截所有ajax请求来设置baseurl n headers？

让我告诉你我如何在ajax中做到这一点。我简单地制作了 4 个基本函数 ajaxGet、ajaxPost、ajaxDel 和 ajaxPut。并使用这些函数来调用应用程序中各处的 API。

在这些基本函数中，我设置了 baseurl 和默认标头。

如果有人找到了更好的方法，例如基本拦截器或除创建基本函数之外的其他方法，请告诉我。

还有一个问题是，大多数人在使用 redux observable 和 rxjs 时如何在应用程序中编写刷新令牌机制。

我在许多应用程序中都遵循了本教程。

https://medium.com/free-code-camp/how-to-get-a-new-access-token-using-redux-observables-and-the-refresh-token-api-d38d875a8add

Answer 1

使用 AJAX RXJS 的拦截器提案

• rxjs 官方文档中没有办法拦截你的 AJAX。
• 就我个人而言，我更喜欢使用可观察量而不是承诺，它们对我来说似乎更强大。
• 我与您分享一个我使用 rxjs 中提供的工具构建的拦截器。它还包括不记名令牌身份验证。

拦截器

import { AjaxConfig, ajax } from 'rxjs/ajax';
import { catchError, throwError, retry, switchMap } from 'rxjs';
import authenticateService from './authenticate.service';

const ajaxIntercept = (req: AjaxConfig) => {
  req.headers = {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${localStorage.getItem('token')}`,
  };
  return ajax(req).pipe(
    catchError(error => {
      if (error.status === 401) {
        return authenticateService.observableDataToken().pipe(
          switchMap(r => {
            const token = r.response.data.token;
            localStorage.setItem('token', token);
            req.headers = {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${token}`,
            };
            return throwError(() => req);
          }),
        );
      } else {
        return throwError(() => req);
      }
    }),
    retry(2),
  );
};

export default ajaxIntercept;

使用拦截器

import { AjaxResponse } from 'rxjs/ajax';

const requestFunction = (id: string, body:modelbody) => {
ajaxIntercept({
  url: `${API}example/${id}`,
  method: 'POST',
  body: body,
}).subscribe({
  next: r => {
    const data = r as AjaxResponse<youModel>;
  },
  error: e => {
    /** */
  },
});

};

重要注意事项

• retry 我们可以配置当 X 错误发生时我们想要启动请求的次数。对于本示例，当您发出请求且令牌过期时，请设置 cos 1。 2 更新令牌并发起请求。
• req.url 如果您愿意，您可以在拦截器中配置基本 url。例如，当我调用拦截器函数时发送 url，可能您需要使用不同的 url
• catchError-pipe-switchMap 在错误中，因为我可以验证类型并执行提供的示例中所需的操作，所以我使用管道和 switchmap 在重新启动待处理的请求之前发出令牌更新请求。
• 对于使用 Hooks 的示例。在 Nextjs 中
• 当我调用拦截器函数时，它会配置所需的请求“POST”“PUT”“GET”...等