Why spread operator is missing out data?

Question

I am working with Github API using Octokit library.

I have a function which list out all the repository of a user(username). I have called this function on click of a button called Fetch

For sake of simplicity, I am rendering out only 1st repository(using index 0).

const list = []

  function fetchRepos() {
    octokit.repos
      .listForUser({
        username: 'abhinav-anshul',
      })
      .then((details) => list.push(details.data[0].name))

    console.log('List Array', list)

    const list2 = [...list]
    console.log(list2)
  }

As we can see in the code, I am handling a promise chain, and in that promise chain, I am pushing the repo result in the empty array called list.

In the console.log('List Array', list), I am able to get the '0th' repo name correctly, as given in the image below:

But when I try to use spread operator to pass the list array to a new array called list2 and do a console.log(list2) I get the following :

Why I have lost the name of the repo here? Am I doing something conceptually wrong? Any help is really appreciated.

Thank you

Robo Robok · Answer 1 · 2020-05-13T19:22:35.777

1

Your then() is asynchronous, so it runs after your console.log(list2). That's why your list2 is still an empty array.

I suggest making your function async:

const list = [];

async function fetchRepos() {
    const details = await octokit.repos
        .listForUser({
            username: 'abhinav-anshul',
        });

    list.push(details.data[0].name);

    console.log('List Array', list);
}

edited May 13 '20 at 19:22

answered May 13 '20 at 19:00

Robo Robok

21,132
17
68
126

Indeed, for example the spreading operation `list2 = [...list]` should be included inside the callback you passed to `.then()`, so as to be sure it gets executed in time – Luc125 May 13 '20 at 19:08
1

@Luc125 or, even better, wrapping this functionality in `async` / `await` will make it readable. – Robo Robok May 13 '20 at 19:09
Even I do it synchronously, It still returns a promise. How can I handle data further without promise? – anshul May 13 '20 at 19:14
1

This library works asynchronously, you don't have control over doing it synchronously. The only thing you can do is either use `then()` properly or marking your function as `async function` and putting `await` before calling an asynchronous methods. – Robo Robok May 13 '20 at 19:16
@RoboRobok could you write a code snippet using async/await? – anshul May 13 '20 at 19:17
@RoboRobok Even I use async function, it is still an asynchronous task, so how will it solve the problem? – anshul May 13 '20 at 19:21
@AbhinavAnshul yes, please take a look at the edited answer. – Robo Robok May 13 '20 at 19:22
@AbhinavAnshul `await` makes you write synchronous-like code for asynchronous operations. It just makes the following like wait until the `await`-ed operation is done. It can take anything between 0ms and forever, in theory. – Robo Robok May 13 '20 at 19:25
@RoboRobok It is generating a new kind of side-effect – anshul May 14 '20 at 04:45
What do you mean? – Robo Robok May 14 '20 at 09:49

Why spread operator is missing out data?

1 Answers1