在angular4/typescript中创建新的Javascript对象发送json接收json

这将是一篇很长的文章，但我需要清楚地了解服务器和客户端之间的通信

假设我有一个名为

cityList:City[]=[]的变量，并设计为包含城市列表

The model for `City` is:

    export class City{
  public name: string;

  constructor(name:string){
    this.name = name;
  }
}

我有一个api调用，用于返回城市列表。此服务已将我的通用getService注入其中（下面的getService）：

将对数据起作用的服务：

import {Injectable, OnInit} from '@angular/core';
import 'rxjs/Rx';

import {City, Neighborhood, Cuisine, Privacy, VenueType, Amenities } from
import {ServerComService} from "./serverComService";
import {cityListUrl, venueFilterDataOptionsUrl} from 'app/backendUrls';

@Injectable()
export class DynamicFormDataService implements OnInit {

  constructor(private serverComService: ServerComService){}

  cityList: City[]= [];
  neighborhood = [];
  cuisine = [];
  privacy = [];
  venueType = [];
  amenities = [];



  cityGet(){

    if(this.cityList.length > 0 ){
      return this.cityList;
    }
    this.cityList = this.serverComService.getService(cityListUrl)
    return this.cityList;
  }

 ngOnInit(){
    this.cityGet();
}

}

有一些输入错误，但让我们忽略他们这是我只是在了解第一工作

当我想使用
cityList
数组中的数据时，它只是迭代并调用数组positions city.name值吗

如果我想添加到城市列表数组中呢

我得打电话给城市建设者，
那么，也许是一个以表单数据为参数的函数

c = new City('Pound Town');
cityList.push(c);

然后是一个调用push或put http方法的服务，这取决于我是更新还是创建新的

那么，主要的和全部的问题是，在这个过程中，我是否遗漏了任何跳过转换的东西
将Json转换为Javascript对象

还是将javascript对象转换为Json

还是我的整体执行正确？设置变量类型是否会将json字符串转换为我的客户机代码中要使用的对象的正确类型？
您的代码存在一些问题：

（1） 如果在异步操作（如http请求）中获取该值，则无法返回该值。

您需要返回对值的承诺，而不是值本身。

比如：

getService(url) {
    this.http.get(url).then(response => {
        // transform response and return it
    }).catch(e => console.log(e));
}

cityGet() {
    if(this.cityList.length > 0 ){
        return Promise.resolve(this.cityList);
    }

    return this.serverComService.getService(cityListUrl).then(response => {
        this.cityList = response;
    });
}

（2） 由于
getService
是异步的，
cityGet
也不能返回值，因此可能类似于：

getService(url) {
    this.http.get(url).then(response => {
        // transform response and return it
    }).catch(e => console.log(e));
}

cityGet() {
    if(this.cityList.length > 0 ){
        return Promise.resolve(this.cityList);
    }

    return this.serverComService.getService(cityListUrl).then(response => {
        this.cityList = response;
    });
}

（3） 在
getService
中，您会收到一个表示json响应的js对象，如果您想拥有
City
的实例，则需要为结果中的每个项目创建一个实例：

getService(url) {
    this.http.get(url).then(response => {
        return response.map(city => Object.assign(new City(), city));
    }).catch(e => console.log(e));
}

您的代码存在一些问题：

（1） 如果在异步操作（如http请求）中获取该值，则无法返回该值。

您需要返回对值的承诺，而不是值本身。

比如：

getService(url) {
    this.http.get(url).then(response => {
        // transform response and return it
    }).catch(e => console.log(e));
}

cityGet() {
    if(this.cityList.length > 0 ){
        return Promise.resolve(this.cityList);
    }

    return this.serverComService.getService(cityListUrl).then(response => {
        this.cityList = response;
    });
}

（2） 由于
getService
是异步的，
cityGet
也不能返回值，因此可能类似于：

getService(url) {
    this.http.get(url).then(response => {
        // transform response and return it
    }).catch(e => console.log(e));
}

cityGet() {
    if(this.cityList.length > 0 ){
        return Promise.resolve(this.cityList);
    }

    return this.serverComService.getService(cityListUrl).then(response => {
        this.cityList = response;
    });
}

（3） 在
getService
中，您会收到一个表示json响应的js对象，如果您想拥有
City
的实例，则需要为结果中的每个项目创建一个实例：

getService(url) {
    this.http.get(url).then(response => {
        return response.map(city => Object.assign(new City(), city));
    }).catch(e => console.log(e));
}

如果您看到我在返回observable之前订阅了observable，那它的aysnc部分就不会有问题了吗？除了使用之外，没有任何东西可以“处理”异步操作。在您的代码中，您在http请求返回响应之前返回
value
，因此
value
将有一个空数组。啊，我明白了。因此，subscribe实际上会在我列出单击按钮或异步任务（如消息更新）的示例中使用。但是，当我尝试填充像这里这样的变量时，会使用它。我不能像你说的那样返回我的代码，因为代码会在我等待承诺兑现的时候执行，对吗？我需要进一步研究，我可能还有其他问题。在许多情况下，您可能会使用
订阅
。但在这种情况下，并不是你想要改变内部状态，而是你想要返回操作的结果，这就是为什么你要使用承诺。如果你看到我在返回之前订阅了我的observable，那它不就可以处理aysnc部分吗？除了使用，没有任何东西可以“处理”异步操作。在您的代码中，您在http请求返回响应之前返回
value
，因此
value
将有一个空数组。啊，我明白了。因此，subscribe实际上会在我列出单击按钮或异步任务（如消息更新）的示例中使用。但是，当我尝试填充像这里这样的变量时，会使用它。我不能像你说的那样返回我的代码，因为代码会在我等待承诺兑现的时候执行，对吗？我需要进一步研究，我可能还有其他问题。在许多情况下，您可能会使用
订阅
。但在这种情况下，不是要更改内部状态，而是要返回操作结果，这就是为什么要使用承诺。