Angular 5的HttpClient未发送请求

4
我在 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注入到组件中,它也无法正常工作。

--在同一模块中的其他组件示例调用:(它可以正常工作)

public loginTraditionalMethod(emailAddress : string, plainPassword : string)
    {

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

    }

展示一下如何在你的服务中进行HTTP调用,以及如何在你的组件中调用你的服务。 - David
你如何在其他组件中调用服务?你可以为组件A和组件B发布调用吗? - David
@David 我添加了一个代码示例,其中调用了服务的方法。 - Reverze
是什么呢?我搞不清楚。是你的错误处理程序隐藏了错误吗? - David
1
我犯了个错误。在组件中,我使用了 map() 而不是 *subscribe()*。同时,我在上一篇帖子的示例代码中犯了一个错误,我没有复制代码,而是重写了它。一段时间后,我发现我在原始代码中犯了一个错误。所以上面的代码是正确的,并且似乎正常工作。对于造成的麻烦,我很抱歉,但感谢你的帮助。我花了3个小时才发现这个愚蠢的错误。 - Reverze
显示剩余2条评论
1个回答

8
我遇到了同样的问题,订阅了一个http.get()请求后没有xhr请求。这是一个用于忘记密码功能的请求,因此我没有连接到应用程序。
这个请求被一个http token拦截器拦截了,如果没有检测到会话,则返回一个空的Observable。
也许这对某些人有所帮助...

1
谢谢您,亲切的陌生人!这正是我所需要的! - crackmigg
这个“http token interceptor”在哪里?在应用程序中还是在API服务器上?你能发一些代码吗? - Chiwda
令牌拦截器位于客户端,看起来类似这样:https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8以下的代码将停止任何请求的分派,如果我们没有进行身份验证:if (!this.session.isAuthenticated() && !this.session.isFetching()) { this.session.dispatchSessionLost(); return Observable.empty(); } - Laurie Clark

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接