0

i have a sample es6 class that perform api calls and callback to the class when i to call the class using this keyword it fails with undefined

how can i make the heritance to work?

class class1 {
  function1_1() {
    var ap = new api('endpoint',this.function1_2,{"x":"Y"});
    ap.call()
   } 

   function1_2(){
     // do some code
     this.function1_1 // fail with error - undefined
    }
  }

class api {
  constructor(endpoint,cb,opts) {
    this._endpoint = endpoint;
    this._cb = cb;
    this._opts = opts;
  }

  call() {
    var cbm = this.cb;
    fetch('/apis/'+this.endpoint,{method:"post",body: JSON.stringify(this.opts)}).then(function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' + response.status);
        return;
      }
      response.json().then(cbm);
    }).catch(function(err) {
      console.log('Fetch Error :-S', err);
    });
  }
}
sd1sd1
  • 1,028
  • 3
  • 15
  • 28
  • `this.cb;` should be `this._cb;`, am I wrong?.. Besides, your function namings and invocations are wrong: `function 1_2` should be `function1_2` and `this.function1_1` should be `this.function1_1()`. Besides, be careful for the "this". Also, it looks like an endless loop, since function1_1 will call function1_2 that will invoke function1_1 back. Is this intended? what is the expected behavior? – briosheje Jul 23 '19 at 14:30
  • the callback works fine the issue with the function that can't run "this" anymore. i also have getter and setter functions for cb – sd1sd1 Jul 23 '19 at 14:30
  • `function 1_2` do you mean `function1_2`? – VLAZ Jul 23 '19 at 14:32
  • yes. thanks. (i just typed it here and not copy pasted), i edited the question – sd1sd1 Jul 23 '19 at 14:32
  • 3
    A function gets a `this` only if it is called as `object.function()`. In your case, you pass `this._cb` directly to `then`, which will not use `object.function()` to call it. To fix this, you can `bind` the function to the desired `this` value. – Raymond Chen Jul 23 '19 at 14:33
  • OK, this was hard to track down not because it's tricky but because the code wasn't clear. Please try to provide a [mcve] as it makes troubleshooting stuff much faster. At any rate, when you pass `this.function1_2` in `new api('endpoint',this.function1_2,{"x":"Y"});` the function reference you pass will have the wrong `this` context when invoked. – VLAZ Jul 23 '19 at 14:36
  • 1
    This has nothing to do in particular with any of the words used in the question. – trincot Jul 23 '19 at 14:36
  • 1
    Get rid of the callback completely and return the `fetch()` promise. `ap.call().then(this.function_2)` – charlietfl Jul 23 '19 at 14:39
  • @trincot yeah, that too. There is no inheritance and there are only *vaguely* multiple classes. But it's nothing at all connected to any one or even any combination of the title words. Furthermore, the code has mistakes in it which distract from the actual problem, as well as superfluous lines that are irrelevant to what's happening. In particular most of the code in `api` is not needed here, just a `call()` that tries to invoke the callback is enough. – VLAZ Jul 23 '19 at 14:40

0 Answers0