小编Die*_*ega的帖子

ngrx 效果中的 switchMap 取消选项 http 请求

我有一个这样的 ngrx 效果:

@Effect()
  throwError$: Observable<Action> = this.actions$.pipe(
    ofType<notificationActions.ErrorThrow>(
      notificationActions.ActionTypes.ThrowError
    ),
    tap(() => {
      this.store.dispatch(new masterActions.LoadingHide());
      this.sub = this.devTools.liftedState.subscribe(data => {
        this.errorLogService.addErrorLog(JSON.stringify(data)).subscribe(data2 => console.log('data2', data));
        console.log(JSON.stringify(data));
      });
    }),
    map(action => action.payload),
    tap(() => {
      this.sub.unsubscribe();
    }),
    mergeMap(error => {
      return of(
        new notificationActions.ErrorAdd({
          type: error.type,
          description: error.description
        })
      );
    })
  );
Run Code Online (Sandbox Code Playgroud)

errorLogService 的 addErrorLog 方法发送一个 http post 请求,将错误日志存储到数据库中。一切都在执行这样的请求,首先是选项请求,然后是发布请求,但是如果我切换到 switchMap 以组合两个可观察对象,则当我在 chrome 开发工具的网络选项卡上检查它时,选项请求将被取消。

这是重构的代码部分

tap(() => {
      this.store.dispatch(new masterActions.LoadingHide());
      this.sub = this.devTools.liftedState
        .pipe(
          switchMap(data => {
            console.log('data', data);
            return this.errorLogService.addErrorLog(JSON.stringify(data));
          }) …
Run Code Online (Sandbox Code Playgroud)

xmlhttprequest rxjs ngrx-effects angular

4
推荐指数
1
解决办法
2289
查看次数

守卫返回 Observable 后取消了 Angular 5 导航

我有三条路线,其中一条有警卫保护

app.routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './modules/auth/login/login.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
import { CustomersComponent } from './modules/customers/customers.component';

import { AuthGuard } from './shared/guards/auth.guard';


const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  { path: 'home', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: 'customers', component: CustomersComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard] …
Run Code Online (Sandbox Code Playgroud)

observable ngrx angular ngrx-store angular5

2
推荐指数
1
解决办法
1623
查看次数