1

I got unexpected identifier but not sure what is the mistake. I'm using fetch which is already a promise. 

async getUsers = () => {
  const resp = await fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())

  return resp
}

getUsers().then(users => console.log(users))
Sharon Chai
  • 507
  • 1
  • 6
  • 20

5 Answers5

3

Notice the position of the async keyword:

Not:

async getUsers = () => {

But:

getUsers = async () => {

Run:

getUsers = async () => {
  const resp = await fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
  return resp;
};

getUsers().then(users => console.log(users))

As per comments:

Should I chain then() in getUsers()? async/await suppose to eliminate then() am I right?

Yes, you can await any Promise. Or use both .then() sometimes and await at others (like does the code above). But you could just use async/await as well.

The example below uses no .then():

getUsers = async () => {
  const resp = await fetch('https://jsonplaceholder.typicode.com/posts/1')
  return resp.json();
};

(async () => {
  // notice to use the await keyword, the code must be wrapped in an async function
  const users = await getUsers();
  console.log(users);
})();
acdcjunior
  • 132,397
  • 37
  • 331
  • 304
  • oh that's a careless mistake! good spot! one question should I chain then() in getUsers()? Async/await suppose to eliminate then() am I right? – Sharon Chai Feb 07 '18 at 11:18
  • Yes, you don't *have* to chain. You can use `async`/`await` there as well (and any other `Promise`, for what is worth). – acdcjunior Feb 07 '18 at 11:21
  • @SharonChai i would stick with either `async/await` or `then/catch`. Neither is wrong, however mixing them looks a bit weird :-) *Personal opinion:* use `async/await`, since it's just easier to read. Check the answer below by alex dykyi for a version of it – DoXicK Feb 07 '18 at 11:21
1

Aside from the typo in the async word pointed by @acdcjunior, you're mixing async / await with the usual promise handling (.then()) which is not wrong but kind of defeats the point. Using only async / await would look like:

const getUsers = async () => {
  const resp = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  return resp.json(); 
}

async function fetchUsers() {
    try {
        const users = await getUsers();
        console.log(users);
    } catch(err) {
        console.log(err);
    }
}

fetchUsers();
Daniel Conde Marin
  • 7,588
  • 4
  • 35
  • 44
  • an async function just returns a promise by default. `(async () => true)().then(res => console.log(res === true))` will result in `true` – DoXicK Feb 07 '18 at 11:15
  • also: you can't use await outside of an async function: https://stackoverflow.com/questions/39679505/using-await-outside-of-an-async-function – DoXicK Feb 07 '18 at 11:17
  • 1
    I've updated my answer to be more explicit about the context where you use await. That was an assumption. – Daniel Conde Marin Feb 07 '18 at 11:23
0

you have the syntax wrong:

const getusers = async () => {
  ...
}

const is optional

DoXicK
  • 4,784
  • 24
  • 22
0

Your syntax of declaring your function is wrong, here's some explanation.

If getUsers is a method of a react component class the syntax should be :

  getUsers = async () => {
    const resp = await fetch(
      'https://jsonplaceholder.typicode.com/posts/1'
    ).then(response => response.json());
    return resp;
  };

or :

  async getUsers() {
    const resp = await fetch(
      'https://jsonplaceholder.typicode.com/posts/1'
    ).then(response => response.json());
    return resp;
  };

If it's outside of a react component class or in a stateless arrow function component you can use this syntax :

  const getUsers = async () => {
    const resp = await fetch(
      'https://jsonplaceholder.typicode.com/posts/1'
    ).then(response => response.json());
    return resp;
  };
Dyo
  • 4,429
  • 1
  • 15
  • 30
0

const getUsers = async () => {
  try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/posts/1');
   
      return resp.json();
  } catch(e) {
     console.error(e)
  }  
}

(async () => {
   const users = await getUsers();
   console.log(users)
})()

Use this, and run

аlex
  • 5,426
  • 1
  • 29
  • 38
  • what you need to use `let resp` not `const resp`?. Isn't it easier to just return it? – Sharon Chai Feb 08 '18 at 02:31
  • @SharonChai if you want use const, see here example const resp = fetch('https://jsonplaceholder.typicode.com/posts/1').then(res => res.json() ) You have 2 choises only in this case: 1. Use const with Promise.then; 2. Use async/await with let definition or with creating new variable; Make sense? – аlex Feb 08 '18 at 09:15
  • so you removed `let` in your answer? now it looks better. – Sharon Chai Feb 11 '18 at 02:33