【问题标题】:Typescript promise losing values after .then打字稿承诺在 .then 之后失去价值
【发布时间】:2017-04-01 07:21:05
【问题描述】:

我在 Angular2 服务中有一个函数,它通过 Promise.resolve 返回 Mock 数据,当用 .then 解包时,它会给我一个空的 promise 对象。我可以看到调用函数在将其传递给.then however inside of.thenI seem to be left with just an empty promise.之前,正在接收带有__zone_symbole__value属性中有效负载的Promise。

  getTemperatureData(): Promise<any> {

    let data = this.convertJSONToGoogleChartTable(temperatureData_JSON);
    let p = Promise.resolve(data);
    return p;
  }

使用 Chrome 我看到上面的 p 看起来像

ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: "[["Date","Temperature","LowTemperature"],["05/11/2…",69.02,null],["06/11/2016 23:54:34",69.99,null]]"}

下面是分成两行调试的调用代码。

getTemperatureData() {
    var d = this.dataService.getTemperatureData();
    d.then(data => this.line_ChartData = data);
}

当我看 d 时,我看到的和上面的 p 一样

ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: "[["Date","Temperature","LowTemperature"],["05/11/2…",69.02,null],["06/11/2016 23:54:34",69.99,null]]"}

.then 出现问题,其中“d”的值只是一个空承诺。以下内容来自 Chrome 开发工具控制台,以显示我所看到的内容。

d.then(data => console.log(data))
ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array[0]}

无论我做什么以及尝试了多少组合,我都无法访问 d 中的数据。 (请注意,p 和 d 只是暂时分解代码。)

我的 package.json 如下:

{
  "name": "angular2",
  "version": "0.0.0",
  "license": "MIT",

  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/material": "^2.0.0-alpha.9-3",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "core-js": "^2.4.1",
    "ng2-bootstrap": "^1.1.16",
    "node-mysql": "^0.4.2",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.19-3",
    "codelyzer": "1.0.0-beta.1",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "~2.0.3",
    "webdriver-manager": "10.2.5"
  }
}

【问题讨论】:

  • let p = Promise.resolve(data); 这很奇怪。 Promise 是异步的,所以如果你希望在这里得到 Promise 的结果,这不是它的工作原理。
  • 请向我们展示整个代码。你在用this.line_ChartData 做什么?你可能在某个地方清空它吗?请注意,它引用了同样包含在 Promise 中的数组。改用this.line_ChartData = data.slice()

标签: angular typescript promise


【解决方案1】:

数据的价值只是一句空话

这告诉我convertJSONToGoogleChartTable 正在返回一个承诺,而你并没有将你的承诺链接到它。

请注意,如果您使用的类型比 any 更强,TypeScript 编译器可能会为您捕捉到这一点。

由于您在获取该数据后没有做任何事情,您可以这样做:

  getTemperatureData(): Promise<any> {
    return this.convertJSONToGoogleChartTable(temperatureData_JSON);
  }

但是,如果您想在返回数据之前对其进行处理,您可以在 then 中执行此操作,并与原始承诺链接:

  getTemperatureData(): Promise<any> {
    return this.convertJSONToGoogleChartTable(temperatureData_JSON)
        .then(data => {
            console.log(data);
            return data;
        });
  }

【讨论】:

  • 感谢您的回复。函数 convertJSONToGoogleChartTable 只返回一个字符串,它是原始 JSON 的转换。这一切都在我用于获取和格式化数据的 Angular2 服务类中。
  • 感谢您的回复。函数 convertJSONToGoogleChartTable 只返回一个字符串,它是原始 JSON 的转换。这一切都在我用于获取和格式化数据的 Angular2 服务类中。数据 acuially 看起来像 data "[["Date","Temperature","LowTemperature"],["05/11/2016 00:14:23",72.44,null],["05/11/2016 00:44:31",71.46,null],["05/11/2016 01:14:39",70.48,null],....]]]" 这很好地返回给调用者,在我的例子中是 Angular2 组件中的“d”。对我来说出错的地方是从 d 中提取上述字符串。
  • @JSetter:如果您进入控制台会发生什么:Promise.resolve(2).then(console.log)?另外,如果您在致电convertJSONToGoogleChartTable 之后输入console.log(data) 会怎样?
  • 如下,Promise.resolve(2).then(console.log) 2 ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: undefined} 我也在代码中的断点处尝试了这个,在 d 被赋值后d ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: "[["Date","Temperature","LowTemperature"],["05/11/2…",69.02,null],["06/11/2016 23:54:34",69.99,null]]"} d.then(console.log) ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array[0]} __value 的内容没有显示在控制台中,__value 是 Array[0 ].
  • 嗯。诡异的。我对那个很困惑。您是否可以尝试删除部分,直到您获得最低限度可验证的示例?我想知道您页面上的第三方库是否与 Promise 对象混淆。
猜你喜欢
  • 2017-12-22
  • 1970-01-01
  • 2017-10-21
  • 2018-01-21
  • 2020-03-10
  • 2018-12-19
  • 2017-03-11
  • 2022-01-27
  • 2019-08-24
相关资源
最近更新 更多