How can I fetch data asynchronously in React and Vue?

How can I fetch data asynchronously in React and Vue?

In React, you can use the useEffect hook along with fetch or axios to retrieve data. In Vue, you can use the mounted lifecycle hook for similar functionality.

Can you show me a code example for both?

Sure! In React:

import React, { useEffect, useState } from 'react';

const DataFetchingComponent = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    return <div>{JSON.stringify(data)}</div>;
};

And in Vue:

<template>
  <div>{{ data }}</div>
</template>

<script>
export default {
  data() {
    return { data: null };
  },
  mounted() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.data = data);
  }
};
</script>

What about error handling in these examples?

In React, you can add a catch block to handle errors. In Vue, you can use a try-catch block inside the mounted method. Would you like to see those examples?