0

Hi I am new to angular and javascript promise... I am trying to execute the following code and I have a few questions...

code here. and I can see a table filled with mock data

 response;
 promise_response;
 data;

 ngOnInit() {
    this.response = this.bitbucket.commits.list({
      include: 'master',
      repo_slug: 'test',
      workspace: 'test',
    });

    this.promise_response = Promise.resolve(this.response);

    this.promise_response.then((data) => {
      this.data = data.data.values;
      console.log(data.data.values);
      console.log('data');
    });

    console.log('test');

    // replace below with actual data;
    for (let i = 0; i < 5; i++) {
      const item = {
        id: '1',
        comment: faker.random.words(),
        time: faker.date.future(),
      };
      this.dataSource.push(item);
    }
  }
}

  1. I am doing this "this.promise_response = Promise.resolve(this.response);" because I notice that when I console.log(this.response), I got "zoneAwarePromise"...which leads to google about promise and made me believe I need to somehow resolve it...

  2. I added a few code to resolve the promise (not sure if it is correct), and I noticed that "test" is printed first..then "data".. and I wonder why ...

  3. I moved the following inside this.promise_response.then but then my table is empty ... why...

// replace below with actual data;
    for (let i = 0; i < 5; i++) {
      const item = {
        id: '1',
        comment: faker.random.words(),
        time: faker.date.future(),
      };
      this.dataSource.push(item);
    }

Thanks!

Update:

Now the following works as expected. Thank you.

ngOnInit() {
    this.bitbucket.commits
      .list({
        include: 'test',
        repo_slug: 'test',
        workspace: 'test',
      })
      .then((response) => {
        this.data = response.data.values;
        this.dataSource = this.data;
      });
  }
void
  • 345
  • 3
  • 13
  • 1
    You probably just want `this.bitbucket.commits.list(...).then(response => { /* work with response here */ })`. All the song and dance with wrapping it in other promises is superfluous and misses the crux of the matter. There may or may not be additional issues with making Angular aware of the resolved promise then, but you'll need to fix this first. – deceze May 27 '20 at 07:30
  • thank you! this made the code looks cleaner. It made me understand more since I see some other code also doing something similar...but then I still have question about 2. and 3. – void May 27 '20 at 07:36
  • 1
    2: Because that's how it works, the `then` callback is called *something later* when the promise resolves. 3: That'll depend on what kind of promise exactly that is; again, Angular may not be aware of data having been updated if it's not aware of the promise. The way you're currently doing it it's most certainly not aware of it. Present us your fixed code if that problem in particular remains to be solved. – deceze May 27 '20 at 07:38
  • ``` ngOnInit() { this.bitbucket.commits .list({ include: 'master', repo_slug: 'test', workspace: 'test', }) .then((response) => { this.data = response.data.values; console.log(response.data.values); console.log('data'); }); console.log('test'); // replace below with actual data; for (let i = 0; i < 5; i++) { const item = { id: '1', comment: faker.random.words(), time: faker.date.future(), }; this.dataSource.push(item); } } } ``` – void May 27 '20 at 07:41
  • sorry about the formatting – void May 27 '20 at 07:42
  • 1
    [Edit] your question. – deceze May 27 '20 at 07:43
  • I made the change as you suggested with a minor change and now it works. ``` ngOnInit() { this.bitbucket.commits .list({ include: 'test', repo_slug: 'test', workspace: 'test', }) .then((response) => { this.data = response.data.values; this.dataSource = this.data; }); } ``` – void May 28 '20 at 22:28

0 Answers0