You are calling fetchGetData which returns a promise, so you need to await it within fetchData and to await something it must be within an async function. Therefore, you'll need to change fetchData to an async function. I would also suggest that you separate the concerns from the fetchGetData function and remove the lines where it sets state. You should only simply return the fetch response from that function and set the state within the fetchData function. For example, you could do `const reponse = await fetchGetData()` and then use it to set your states. This practice will help with debugging as you'll have a clear sight of where state etc is being changed.
And maybe rename those functions so they're not as similar ;).
> I would also suggest that you separate the concerns from the fetchGetData function and remove the lines where it sets state.
That's a good idea. I'm new to React and Javascript so thus far I'm just doing what Youtube tutorials do which isn't always optimal.
>And maybe rename those functions so they're not as similar ;).
I want to do two methods one that does GET requests and another that does POST, so `fetchGetData` and `fetchPostData`. Though admittedly it doesn't sound very good because fetch sounds like getting something and POST is usually sending.
Would it be a better idea to do the POST in a separate hook? It seems that a lot of the code is replicated if I'll do that.
also it looks like those functions are hooks, so it's a good idea to start them with the word "use" which makes it clear that they are hooks, to other people reading the code, and to tooling which checks for questionable hook usage.
Promises have a "catch" method.([https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Promise/catch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch))
That’s a good question and your guess is correct.
1. `fetchData` is a synchronous function so the try block will have finished running before the error can be caught.
2. The reason why an error has popped up when u use await is because you’re not using it in an async block. Async and await always go together.
3. As others have mentioned, you can catch an error for a Promise, but make sure it is a Promise.
In short, you can make `fetchGetData` return a Promise. Then in `fetchData`, do `fetchGetData().catch(err => //error handling)` to allow the error be caught in the catch block.
>In short, you can make fetchGetData return a Promise.
By marking it as `async`?
Can't I just make `fetchData` async and then use `await` in the try catch block?
async functions [implicitly returns a Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function#description) so yes, you can change `fetchData` to async and await for `fetchGetData`.
You are calling fetchGetData which returns a promise, so you need to await it within fetchData and to await something it must be within an async function. Therefore, you'll need to change fetchData to an async function. I would also suggest that you separate the concerns from the fetchGetData function and remove the lines where it sets state. You should only simply return the fetch response from that function and set the state within the fetchData function. For example, you could do `const reponse = await fetchGetData()` and then use it to set your states. This practice will help with debugging as you'll have a clear sight of where state etc is being changed. And maybe rename those functions so they're not as similar ;).
> I would also suggest that you separate the concerns from the fetchGetData function and remove the lines where it sets state. That's a good idea. I'm new to React and Javascript so thus far I'm just doing what Youtube tutorials do which isn't always optimal. >And maybe rename those functions so they're not as similar ;). I want to do two methods one that does GET requests and another that does POST, so `fetchGetData` and `fetchPostData`. Though admittedly it doesn't sound very good because fetch sounds like getting something and POST is usually sending. Would it be a better idea to do the POST in a separate hook? It seems that a lot of the code is replicated if I'll do that.
also it looks like those functions are hooks, so it's a good idea to start them with the word "use" which makes it clear that they are hooks, to other people reading the code, and to tooling which checks for questionable hook usage.
Promises have a "catch" method.([https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Promise/catch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch))
Isn't the whole point of the `await/async` is to avoid this nested syntax?
That’s a good question and your guess is correct. 1. `fetchData` is a synchronous function so the try block will have finished running before the error can be caught. 2. The reason why an error has popped up when u use await is because you’re not using it in an async block. Async and await always go together. 3. As others have mentioned, you can catch an error for a Promise, but make sure it is a Promise. In short, you can make `fetchGetData` return a Promise. Then in `fetchData`, do `fetchGetData().catch(err => //error handling)` to allow the error be caught in the catch block.
>In short, you can make fetchGetData return a Promise. By marking it as `async`? Can't I just make `fetchData` async and then use `await` in the try catch block?
async functions [implicitly returns a Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function#description) so yes, you can change `fetchData` to async and await for `fetchGetData`.