选项如何在 AJAX 调用后向 SPA 网站的用户提供反馈

Question

我在 React.js 中构建了 SPA 网站。当来自不同用户交互的 AJAX 调用成功/失败/未决时，有哪些选项可以通知本网站的用户？

我只知道网站一角的 Toastr 样式消息，但这些消息对我来说似乎是垃圾邮件且不方便：

Google 控制台：（底部中心）

常用的toastr库：（常用右上角）

还有其他常用的可能性吗？

我所说的用户交互 AJAX 调用示例：

当用户单击绿色的“检查”按钮时，当前行的状态将异步更改（AJAX 调用更新行状态）。 AJAX 可以成功也可以不成功。如何通知用户状态已更改或未更改？ （我也禁用检查按钮，成功时，但有些用户可能会错过它）

Answer 1

最好的方法是连接某种 HttpInterceptor。我不确定你是如何发出 HTTP 请求的，但是像 axios 这样的库支持这个概念。 Angular 也可以，但你使用的是 react。

• https://github.com/axios/axios#interceptors
• https://www.npmjs.com/package/fetch-intercept

这是我如何以 Angular 进行操作的示例。基本上，我使用 HttpInterceptor 来应用 jwt 凭据，并在出现问题时通过快餐栏（toast）向用户提供反馈。如果您使用的是信誉良好的 HTTP 库，您应该能够将其转换为他们的 HTTP 拦截器设置。

intercept( _request: HttpRequest<any>, _next: HttpHandler): Observable<HttpEvent<any>> {
    return this._store.select(state => state.authState?.token).pipe(
        take(1),
        exhaustMap( token => {
            const req = token ? _request.clone({
                headers: new HttpHeaders({ Authorization: `Bearer ${token}`})
            }) : _request.clone();
            return _next.handle(req).pipe(
                catchError( (_error: any, _caught: any) => {
                    switch ( _error.status ) {
                        case 400:
                            if (_error.error && _error.error !== '') {
                                this._uiService.showSnackbar(_error.error);
                            } else {
                                this._uiService.showSnackbar(`400: Bad Request`);
                            }
                            break;
                        case 401:
                            this._router.navigateByUrl('/login').then();
                            break;
                        case 403:
                            this._uiService.showSnackbar('Access Denied');
                            break;
                        case 404:
                            this._uiService.showSnackbar(_error.error || `404: Resource not found`);
                            break;
                        case 500:
                            if (_error.error && _error.error !== '') {
                                this._uiService.showSnackbar(`Exception: ${_error.message}`, 30);
                            } else {
                                this._uiService.showSnackbar(`500: An error occurred on the server`);
                            }
                            break;
                    }
                    return of(_error);
                })
            );
        })
    );
}