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) => {
        const firstTenNews = response.data.slice(0, 10);
        setCurrentNews(firstTenNews);
        setLoading(false);
      })
      .catch((err) => {
        console.log("Error fetching and parsing data", err);
        setLoading(false);
      });
  }, []);

async/await

  useEffect(() => {
    async function fetchCurrentNewsData() {
      try {
        const result = await axios.get(
          `https://finnhub.io/api/v1/news?category=general&token=${process.env.REACT_APP_API_KEY}`
        );
        const firstTenNews = result.data.slice(0, 10);
        setCurrentNews(firstTenNews);
        setLoading(false);
      } catch (err) {
        console.log("Error fetching and parsing data", err);
        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 👩🏻‍💻

Blog

Re-writing then/catch to async/await

Gladys Pascual

then/catch

async/await

Join Our Newsletter. No Spam, Only the good stuff.

Related