HttpClient Angular 5 不发送请求

Posted 2023-03-31

【中文标题】HttpClient Angular 5 不发送请求

【英文标题】：HttpClient Angular 5 does not send request

【发布时间】：2018-02-08 17:14:25

【问题描述】：

我在 Angular 5 中遇到了 HttpClient 的问题。HttpClient 没有在两个指定的组件上发送任何请求（我在控制台中看不到任何 xhr 登录）。在其他组件上，一切都很好。

从组件 A 调用 ApiService POST 方法（像 HttpClient 的包装器一样工作的自定义服务），但是当我从组件 B 调用此方法时 HttpClient 似乎被冻结了。

我的应用中有很多使用 ApiService 的组件。一切都很好。我不知道出了什么问题。

---回应

ApiService.ts

@Injectable()
export class ApiService

    private errorListeners : Map<string, Array<(details ?: any) => any>> =
        new Map<string, Array<(details ?: any) => any>>();

    public constructor(private http: HttpClient)
    

    

    public post<T>(path : string, data : any, urlParams : any = null) : Observable<any>
    
        return this.http.post<T>(`$environment.api.path$path`, data, 
            params: urlParams
        ).catch(this.catchErrors()).map(response => 
            if (response['Error'])
                throw response['Error'];
            

            return response;
        );
    

-- 组件

   @Component(
    selector: 'login-register-component',
    templateUrl: './register.component.html',
    styleUrls: [
        './../../assets/main/css/pages/login.css'
    ]
)
export class RegisterComponent implements OnInit, OnDestroy


public constructor(private route: ActivatedRoute,
                       private router: Router,
                       private userService : UserService,
                       private apiService: ApiService
    )
    
        this.apiService.post('/some-endpoint', null, ).subscribe(res => 
console.log(res);

);

即使我直接将 HttpClient 注入到组件中，HttpClient 也不起作用

-- 同一模块中的其他组件 示例调用：（有效）

public loginTraditionalMethod(emailAddress : string, plainPassword : string)
    

        this.apiService.post('/auth/email', 
            email: emailAddress,
            password: plainPassword
        , ).subscribe(res => 
           console.log(res);
        )

    

【问题讨论】：

了解一些方法：服务中的 http 调用，以及如何在组件中调用服务

@David 我编辑了帖子

其他组件中如何调用service？您可以发布组件 A 和 B 的调用吗？

@David 我添加了一个调用服务方法的代码示例

我滑倒了。在组件而不是调用 subscribe() 中，我使用了 map()。我在上面的帖子中的示例代码也犯了错误，我没有复制代码，我重写了它，过了一会儿我发现我在原始代码中犯了错误。所以上面的代码是正确的，并且似乎可以正常工作。很抱歉给您带来麻烦，但感谢您的帮助。我花了 3 个小时才看到这个愚蠢的小姐

【参考方案1】：

我遇到了同样的问题，订阅http.get() 后没有 xhr 请求。这是一个忘记密码功能的请求，因此我没有连接到应用程序。

请求被一个 http 令牌拦截器拦截，如果没有检测到会话，该拦截器返回一个空的 Observable。

不知道，这可能对某人有帮助...

【讨论】：

谢谢好心的陌生人！这正是我所需要的！

这个“http 令牌拦截器”在哪里？在应用程序中，还是在 API 服务器上？可以发一些代码吗？

令牌拦截器是客户端，看起来像这样：medium.com/@ryanchenkie_40935/… 如果我们没有通过身份验证，以下代码会阻止任何请求被分派：if (!this.session.isAuthenticated() && !this.session.isFetching()) this.session.dispatchSessionLost(); return Observable.empty();