为什么我不能从 $http 成功处理程序分配给 class 变量?
Why can't I assign to a class variable from a $http success handler?
对于我正在从事的项目,我发现了一个没有多大意义的情况。我强烈怀疑,当我在 TypeScript 中工作时,我的特殊问题是由于 javascript 的一个有趣的细微差别,但我不确定如何证明它, 或修复它。
背景
对于我正在处理的应用程序,我有一个相当基本的服务,它负责与 Web API 进行通信。
与我通常所做的唯一不同的是,我没有使用 TypeScript 的 'lambda' 语法来实现 $http.get(...).then(...)
成功回调,而是使用 class 函数,因为 A) 我正在使用的代码实际上使用了错误回调,并且 B) $http.get(...).then(success, error)
语法用 lambda 语法阅读起来有点乱。
// Not pretty, but sufficient.
this.$http.get(...).then(() => { ... });
// Ewwww...
this.$http.get(...)
.then(() => {
...
}, () => {
...
});
// Much better!
this.$http.get(...)
.then(onFooSuccess, onError);
相关服务如下:
namespace MyApp.Models {
export class WebApiResult<T> {
public data: T;
}
}
namespace MyApp.Services {
export class SomeService {
public status: SomeServiceStatus = new SomeServiceStatus();
public static $inject: string[] = ['$http'];
public constructor(
public $http: ng.IHttpService
) {
}
public doSomething(): ng.IPromise<SomeServiceStatus> {
this.$http.get('/api/some/SomeAction')
.then(this.onDoSomethingSuccess, this.describeError);
}
// This is the problem method. When this code runs,
// a type error is generated.
public onDoSomethingSuccess(result: Models.WebApiResult<SomeServiceStatus>): SomeServiceStatus | ng.IPromise<SomeServiceStatus> {
if(!result.data.isInSpecialState) {
return result.data;
}
// TypeError! Can't assign to undefined.
this.status = result.data;
return result.data;
}
public describeError(error: any) {
alert('oops');
}
}
export class SomeServiceStatus {
public isInSpecialState: boolean = false;
public someStatusMessage: string = '';
public someIdentifier: string = '';
}
angular
.module('app')
.service('someService', SomeService);
}
问题
因此,无论何时调用此服务,都会成功执行 $http
获取。这是成功回调的问题,但是 - 当行 this.status = result.data
被命中时,它总是抛出异常,因为无法将 result.data
分配给 属性 status
of undefined
.
目前,我的理论是 this
并不是 实际上指的是 SomeService
,而是别的东西,甚至可能是 class 方法被用作委托。
问题
这个理论引出了一些问题。
this
到底指的是什么?在 Visual Studio 2015 中将鼠标悬停在上面会显示 'helpful' 文本:this: this
。谢谢微软。
-
this
甚至应该这样做吗?这是一个 TypeScript 错误,还是我用生成的 JavaScript? 搬起石头砸自己的脚
- 在处理同时具有成功和错误回调的 AngularJS 承诺时,是否有任何推荐的风格选择?可能是我没有找到更好的代码编写方法,或者我根本不知道什么。这不是第一次提出 SO 问题教会了我一些东西。
这是JavaScript的事情。
如果你提供一个函数实例,或者像这样写在经典的JavaScript中:
..then(function(data) { ...}, function(error) { ... })
然后,与新的 lambda 表达式不同,JavaScript 以旧方式运行并且 "this" 被设置为指向这些处理程序的 doSomething() {} 内部的范围。
但是 bind() 可以帮助您保持漂亮的语法完整,只是有一点冗余:
public doSomething() {
this.$http.get('/api/some/SomeAction')
.then(this.onDoSomethingSuccess.bind(this), this.describeError.bind(this));
}
对于我正在从事的项目,我发现了一个没有多大意义的情况。我强烈怀疑,当我在 TypeScript 中工作时,我的特殊问题是由于 javascript 的一个有趣的细微差别,但我不确定如何证明它, 或修复它。
背景
对于我正在处理的应用程序,我有一个相当基本的服务,它负责与 Web API 进行通信。
与我通常所做的唯一不同的是,我没有使用 TypeScript 的 'lambda' 语法来实现 $http.get(...).then(...)
成功回调,而是使用 class 函数,因为 A) 我正在使用的代码实际上使用了错误回调,并且 B) $http.get(...).then(success, error)
语法用 lambda 语法阅读起来有点乱。
// Not pretty, but sufficient.
this.$http.get(...).then(() => { ... });
// Ewwww...
this.$http.get(...)
.then(() => {
...
}, () => {
...
});
// Much better!
this.$http.get(...)
.then(onFooSuccess, onError);
相关服务如下:
namespace MyApp.Models {
export class WebApiResult<T> {
public data: T;
}
}
namespace MyApp.Services {
export class SomeService {
public status: SomeServiceStatus = new SomeServiceStatus();
public static $inject: string[] = ['$http'];
public constructor(
public $http: ng.IHttpService
) {
}
public doSomething(): ng.IPromise<SomeServiceStatus> {
this.$http.get('/api/some/SomeAction')
.then(this.onDoSomethingSuccess, this.describeError);
}
// This is the problem method. When this code runs,
// a type error is generated.
public onDoSomethingSuccess(result: Models.WebApiResult<SomeServiceStatus>): SomeServiceStatus | ng.IPromise<SomeServiceStatus> {
if(!result.data.isInSpecialState) {
return result.data;
}
// TypeError! Can't assign to undefined.
this.status = result.data;
return result.data;
}
public describeError(error: any) {
alert('oops');
}
}
export class SomeServiceStatus {
public isInSpecialState: boolean = false;
public someStatusMessage: string = '';
public someIdentifier: string = '';
}
angular
.module('app')
.service('someService', SomeService);
}
问题
因此,无论何时调用此服务,都会成功执行 $http
获取。这是成功回调的问题,但是 - 当行 this.status = result.data
被命中时,它总是抛出异常,因为无法将 result.data
分配给 属性 status
of undefined
.
目前,我的理论是 this
并不是 实际上指的是 SomeService
,而是别的东西,甚至可能是 class 方法被用作委托。
问题
这个理论引出了一些问题。
this
到底指的是什么?在 Visual Studio 2015 中将鼠标悬停在上面会显示 'helpful' 文本:this: this
。谢谢微软。-
this
甚至应该这样做吗?这是一个 TypeScript 错误,还是我用生成的 JavaScript? 搬起石头砸自己的脚
- 在处理同时具有成功和错误回调的 AngularJS 承诺时,是否有任何推荐的风格选择?可能是我没有找到更好的代码编写方法,或者我根本不知道什么。这不是第一次提出 SO 问题教会了我一些东西。
这是JavaScript的事情。 如果你提供一个函数实例,或者像这样写在经典的JavaScript中:
..then(function(data) { ...}, function(error) { ... })
然后,与新的 lambda 表达式不同,JavaScript 以旧方式运行并且 "this" 被设置为指向这些处理程序的 doSomething() {} 内部的范围。
但是 bind() 可以帮助您保持漂亮的语法完整,只是有一点冗余:
public doSomething() {
this.$http.get('/api/some/SomeAction')
.then(this.onDoSomethingSuccess.bind(this), this.describeError.bind(this));
}