javascript - Angular Provider/JS - 如何从 $http().then() 访问 'uncle method' ？

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 7 年前。

问题是我无法访问 set方法:

  this.$get = function( $http ) {

    return 
    {
      set: function(UserData)
      {
        this.user = UserData ;
        localStorage.setItem('user', JSON.stringify( UserData ) );
      },

      get: function()
      {
        return this.user;
      },

      send: function(data)
      {
        $http.post(BASE_URL + 'user/login', data)
            .then( function( res ){

              // Error !

              this.set(res.data); 

              console.log(this); // return window object

              // Here i want to access to 'this.set()'
              // but i get error: 'ypeError: this.set is not a function'

            });
      }
    }
 }

我寻找访问 this.set() 的解决方案

谢谢!

Answer 1

在回调之外保存 this 的副本并使用它。

this.$get = function ($http) {
  return {

    set: function (UserData) {
      this.user = UserData;
      localStorage.setItem('user', JSON.stringify(UserData));
    },

    get: function () {
      return this.user;
    },

    send: function (data) {
      var _this = this;
      var url = BASE_URL + 'user/login';
      $http.post(url, data).then(function (res) {
        _this.set(res.data); 
      });
    }

  };
}

使用 ES6:

this.$get = function ($http) {
  return {

    set(UserData) {
      this.user = UserData;
      localStorage.setItem('user', JSON.stringify(UserData));
    },

    get() {
      return this.user;
    },

    send(data) {
      let url = BASE_URL + 'user/login';
      $http.post(url, data).then(res => {
        this.set(res.data); 
      });
    }

  };
}