Rewrite function in ES2017

Hello,

I am pretty new to ES2017 and to asynchronous/synchronous calls.

I have this function to rewrite, can someone explain what it exactly means and give hints on rewriting it ?

    const functionToReWrite = () => {
      return fetch('myapp/thingy.json')
              .then(res => res.json())
              .then(users => users[0])
              .then(user => fetch('myapp/users/' + user.user_name))
              .then(user => doMyThing(user.json))
              .catch(err => console.log(err))
    }

Thanks in advance for the help !

I will try my best to explain ^^

fetch will return a promise with the result, so then you can apply
.then(result goes to json format). Meaning after fetch is DONE, THEN do this.

.json() also returns a a promise when it’s done. Meaning when .json() is DONE, THEN take the first index of users.
when that is done, take that user and fetch again from myapp/users where the username matches.

When that is done, then take that matched user and doMyThng with the user.json object.
If error, catch it and write it out in console.

Async/Await, (which is probably what’s asked for) can clean up this code and save each callback in a variable, making it easier to read and grasp.

Added a short example with the first lines to make it clearer to grasp, your choice if you want to look :slight_smile:

async function example() {
    let response = await fetch('myapp/thingy.json');
    let data = await response.json();
    // ... continue here
   
}

Thanks for the quick feedback :grinning: this is awesome !!
So each then. would return a new promise and we ask to do something with it right ?

1 Like

Yes, thats correct. So you chain a bunch of .then that will fire after the promises are returned.

Ok thanks for the help really appreciated !
I will try to rewrite using async and post it here

I rewrote the function like that, is this correct.
I am not really sure about the catch, how should i write it ?

async function myFunction(){
  let response = await fetch('myapp/thingy.json');
  let data = await response.json();
  let users = await data.users[0];
  let user = await users.fetch('myapp/users/'+ user.user_name);
  let doSomething = await user.doMyThing(user.json);
  let error = await console.log(error)
    return null
}

You can wrap the statement that might throw an exception in a try/catch block.

something like that:

  async function myFunction(){
   try {
    let response = await fetch('myapp/thingy.json');
    let data = await response.json();
    let users = await data.users[0];
    let user = await users.fetch('myapp/users/'+ user.user_name);
    let doSomething = await user.doMyThing(user.json);
  }
  catch(error) {
   console.log(error)
  }
}

You could also do an if statement and put in a callback as parameter for the async func.

If(!user){
return cb(“Username didn’t match”);
}

Also I would use a different try/catch for each block, since they might have different error handeling. Things can get messy quite fast, thats why in node people will build wrappers.

Example

1 Like

thanks for the advice and example :+1: