如何解决如何从 url 中以 angular 的形式获取数据并将其保存在变量中
大家好,我正在尝试从 URL 获取数据并将该数据保存在一个变量中,我需要该变量及其值。
这是我的服务。
import {Injectable} from '@angular/core';
import {HttpClient,HttpErrorResponse} from "@angular/common/http";
const route: string = "http://localhost:51044/api/";
export enum userActions{
signin,signup,}
interface DataResponse {
result: boolean;
accessCode: string;
}
@Injectable({
providedIn: 'root'
})
export class TaskPlusPlusControllerService {
constructor(private http: HttpClient) {
}
public FetchData(properties: string,action: userActions)
{
switch (action)
{
case userActions.signin:
this.getlistofGroup('signin/' + properties);
break;
case userActions.signup:
break;
}
}
private getlistofGroup(url: string) {
let fetchedData: DataResponse = {result: null,accessCode: ''};
this.http.get(route + url).subscribe(
(res) => {
console.log(res);
console.log(res['result']);
console.log(res['accessCode']);
//fetchedData = res;
fetchedData.result = res['result'];
fetchedData.accessCode = res['accessCode'];
}
);
console.log(fetchedData);
}
}
所以我直接从 res
获取控制台中的数据,但是当我登录 fetchedData
时,它的值没有改变。
我该怎么做?
解决方法
javascript 是一种异步编程语言。您必须在订阅方法中执行 console.log 操作。
private getListOfGroup(url: string) {
let fetchedData: DataResponse = {result: null,accessCode: ''};
this.http.get(route + url).subscribe(
(res) => {
console.log(res);
console.log(res['result']);
console.log(res['accessCode']);
//fetchedData = res;
fetchedData.result = res['result'];
fetchedData.accessCode = res['accessCode'];
// move here
console.log(fetchedData);
}
);
// remove from here
console.log(fetchedData);
}
,
Javascript 是一种单线程异步语言。当您调用 promise 时,它不能在范围之外被引用(您只能在 {} 内引用 result a promise 的值)。
如果您想将 fetchedData
用于另一个函数。试试这个:
import {Injectable} from '@angular/core';
import {HttpClient,HttpErrorResponse} from "@angular/common/http";
const route: string = "http://localhost:51044/api/";
export enum userActions{
signin,signup,}
interface DataResponse {
result: boolean;
accessCode: string;
}
@Injectable({
providedIn: 'root'
})
export class TaskPlusPlusControllerService {
fetchedData: DataResponse = null;
constructor(private http: HttpClient) {
this.fetchedData = {result: null,accessCode: ''};
}
public FetchData(properties: string,action: userActions)
{
switch (action)
{
case userActions.signin:
this.getListOfGroup('signin/' + properties);
break;
case userActions.signup:
break;
}
}
private getListOfGroup(url: string) {
let fetchedData: DataResponse = {result: null,accessCode: ''};
this.http.get(route + url).subscribe(
(res) => {
console.log(res);
console.log(res['result']);
console.log(res['accessCode']);
//fetchedData = res;
this.fetchedData.result = res['result'];
this.fetchedData.accessCode = res['accessCode'];
}
);
}
}
,
import {Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
const route: string = "http://localhost:51044/api/";
export enum userActions{
signin,}
@Injectable({
providedIn: 'root'
})
export class TaskPlusPlusControllerService {
blockedPhoneNumbers: string[] = [];
fetchedData = null;
constructor(private http: HttpClient) {
}
/*
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.log("An error occurred:",error.error.message);
} else {
// The backend returned an unsuccessful response code. The response body may contain clues as to what went wrong,console.log(
`Backend returned code ${error.status},` + `body was: ${error.error}`
);
}
// return an observable with a user-facing error message
return throwError(error);
}
private extractData(res: Response) {
return res || {};
}
*/
public FetchData(properties: string,action: userActions) {
switch (action) {
case userActions.signin:
/* if (this.blockedPhoneNumbers.length != 0) {
return this.getListOfGroup('signin/' + properties);
} else {
for (let item in this.blockedPhoneNumbers) {
if (item == properties) {
return null;
}
}
return this.getListOfGroup('signin/' + properties);
}*/
return this.getListOfGroup('signin/' + properties);
break;
case userActions.signup:
break;
}
}
private async getListOfGroup(url: string) {
this.fetchedData = await this.http.get(route + url).toPromise();
return this.fetchedData;
}
}
这里是答案顺便说一句,现在我可以像这样在组件中从我的服务中获取我的数据
this.data = this.taskPlusPlusAPI.FetchData(this.phoneNumber,userActions.signin);
this.data.then(value => {
console.log(value);
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。