Re-writing then/catch to async/await

There are two main ways to handle asynchronous code in JavaScript:

• then/catch (ES6), and
• async/await (ES7).

In this post, I wanted to show to convert a then/catch syntax into an async/await syntax.

In this example, I will be using axios, a JavaScript library that allows making an HTTP request, and an alternative to the .fetch() method. Some of the advantages of using axios over the fetch method are that axios performs automatic transforms of JSON data and has better browser support compared to the fetch method.

then/catch

useEffect(() => {    axios      .get(        `https://finnhub.io/api/v1/news?category=general&token=${process.env.REACT_APP_API_KEY}`      )      .then((response) => {        setCurrentNews(response);        setLoading(false);      })      .catch((err) => console.log("Error fetching and parsing data", err));  }, []);

async/await

useEffect(() => {    async function fetchCurrentNewsData() {      const result = await axios.get(        `https://finnhub.io/api/v1/news?category=general&token=${process.env.REACT_APP_API_KEY}`      );      setCurrentNews(result);      setLoading(false);    }    fetchCurrentNewsData();  }, []);

I hope this helps. Some may argue that the async/await syntax is more readable compared to the then/catch syntax. What are your thoughts? Let me know in the comments below if you have a preferred syntax