Question

我正在使用Angular 2构建应用程序，但仍然无法理解TypeScript的这个范围。

我有一个名为SharedService的TypeScript类，当函数 handleError 收到401状态时，我希望它调用 logout（）。这也是班上的一个功能。

读取，为了将函数与 this 结合使用，我应该使用箭头函数定义，就像我在下面的示例中所做的那样，不知怎的，这仍然会返回：

TypeError：this.logout不是函数（...）

你们知道我做错了吗？

export class SharedService {

    logout = () => {
      console.log('Logout.');
    }

    //This method catches any errors that might arise upon http requests
    handleError(error: any) {
        if (error.status === 401) {
          this.logout(); <----------------------------- This returns the error
        }
        console.error(errMsg); // log to console instead
    }
}

调用this.logout（）时会发生错误！

Answer 1

使用.bind(this)

logout() {
  ...
  return this._http.delete(url, options)
        .map(res => res)
        .catch(this.handleError.bind(this));

或箭头功能

logout() {
  ...
  return this._http.delete(url, options)
        .map(res => res)
        .catch((err) => this.handleError(err));

这种情况的缺点是需要使用=>重复参数，而.bind(this)则不需要这样做。内联() =>定义回调通常更方便。

Answer 2

是。这是因为typescript使logout函数成为SharedService函数。

像这样：

  function SharedService() {
            var _this = this;
            this.logout = function () {
                console.log('Logout.');
                var headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
                var options = new RequestOptions({ headers: headers });
                var url = API_URL + 'users/sign_out.json';
                return _this._http.delete(url, options)
                    .map(function (res) { return res; })
                    .catch(_this.handleError);
            };
        }

和handleError它对原型进行了制作：

  //This method catches any errors that might arise upon http requests
        SharedService.prototype.handleError = function (error) {
            if (error.status === 401) {
                this.logout();
            }
            var errMsg = (error.message) ? error.message :
                error.status ? error.status + " - " + error.statusText : 'Server error';
            console.error(errMsg); // log to console instead
            return Observable.throw(errMsg);
        };

和this更改为另一个范围。

所以你需要使用： .catch(() => this.handleError);

在TypeScript

2 个答案: