gpt4 book ai didi

javascript - Angular 'values is undefined' 订阅映射的 http 响应(未发出请求?)

转载 作者:行者123 更新时间:2023-11-30 09:16:15 33 4
gpt4 key购买 nike

我有一个调用 submitLogin 方法的简单登录表单组件 (LoginComponent)。

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { first } from 'rxjs/operators';

import { AuthenticationService } from '../../services';

@Component({
selector: 'login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
returnURL: string;

u = new FormControl('');
p = new FormControl('');

constructor(private route: ActivatedRoute, private router: Router, private auth: AuthenticationService) { }

ngOnInit() {
this.returnURL = this.route.snapshot.queryParams['returnUrl'] || '/';
}

submitLogin(): void {
this.auth.login(this.u.value, this.p.value).pipe(first()).subscribe(
r => {
if (r) {
console.log("LoginComponent: r:", r);
this.router.navigate([this.returnURL]);
}
},
error => {
console.error("LoginComponent: Error:", error);
}
);
}

}

我得到的错误被打印为 LoginComponent: Error: TypeError: 'values' is undefined,并且它被打印在那个错误 lambda 中。

AuthenticationService 看起来(大致)像这样:

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { User } from '../models/user';
import { APIService } from './api.service';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
private currentUserSubject: BehaviorSubject<User>;
public currentUser: Observable<User>;

constructor(private http: HttpClient, private api: APIService) {
this.currentUserSubject = new BehaviorSubject<User>(null);
this.currentUser = this.currentUserSubject.asObservable();
}
login(u: string, p: string): Observable<boolean> {
return this.api.login(u, p).pipe(map(
r => {
if (r && r.status === 200) {
this.updateCurrentUser();
console.log("returning true");
return true;
}
console.log("returning false");
return false;
}
));
}
}

请注意,映射 lambda 中的所有代码路径都返回一个 bool 值。所以这张 map 不应该吐出 undefined 值。顺便说一下,那些控制台日志永远不会发生。

我的 API 服务负责调用我正在运行的版本化 API。它有很多不相关的东西,但相关的部分是:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map, first } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class APIService {
public API_VERSION = '1.5';

private cookies: string;

constructor(private http: HttpClient) {}

private do(method: string, path: string, data?: Object): Observable<HttpResponse<any>> {
const options = {headers: new HttpHeaders({'Content-Type': 'application/json',
'Cookie': this.cookies}),
observe: 'response' as 'response',
body: data};
return this.http.request(method, path, options).pipe(map(r => {
//TODO pass alerts to the alert service
let resp = r as HttpResponse<any>;
if ('Cookie' in resp.headers) {
this.cookies = resp.headers['Cookie']
}
console.log("returning resp");
return resp;
}));
}

public login(u, p): Observable<HttpResponse<any>> {
const path = '/api/'+this.API_VERSION+'/user/login';
return this.do('post', path, {u, p});
}
}

请再次注意,映射 lambda 中的每个代码路径都会返回一个值。另请注意,"returning resp" 永远不会出现在控制台中。我也从未在网络面板中看到 HTTP 请求。是什么赋予了?为什么它不执行请求,和/或可能导致此错误的原因是什么?

最佳答案

复制您的代码后,我在控制台中获得的堆栈跟踪让我找到了 Angular 的 httpClient 模块 header 代码中的“lazyInit”函数(node_modules\@angular\common\esm5\http\src\headers.js )。

在该函数的第二行,它遍历您提交的 header 的值,您可以在第三行看到 values 变量。它在那里获取标题之一并访问它的值。接下来它将它转换为一个数组,如果它是一个字符串,然后检查它的长度——此时你会得到异常。

如果您查看您的 API 服务,您会提交两个 header :

'Content-Type': 'application/json',
'Cookie': this.cookies

之前,您定义 cookies 变量如下:

私有(private) cookies: string;

由于您没有分配值,它默认为 undefined,这就是您的“Cookie” header 的值,它不是字符串,也没有 length 属性,所以它会抛出异常。

解决方法:

cookies 的初始定义更改为

私有(private) cookies = '';

解决了这个问题。

关于javascript - Angular 'values is undefined' 订阅映射的 http 响应(未发出请求?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54919948/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com