Axios In React

What is Axios?

Axios is a library used to create HTTP requests to external resources. In React.js, using Axios allows you to make HTTP requests to APIs and other external resources. It is a popular library for making HTTP requests in JavaScript applications because it provides a simple API and supports Promises.

Advantages of Axios:

JSON Data Handling: Axios automatically parses JSON responses, eliminating the need for manual parsing. This simplifies working with APIs that return JSON data and reduces boilerplate code.

Built-in CSRF Protection: Axios provides built-in support for CSRF protection through configuration options for setting headers like X-CSRF-Token. This helps developers guard against Cross-Site Request Forgery attacks without needing to implement custom solutions.

Request and Response Interceptors: Axios allows you to define interceptors for both requests and responses. Interceptors provide a way to add global error handling, modify request or response data, set headers, log requests, and more. This capability enhances code modularity and simplifies tasks that would otherwise require repetitive boilerplate code.

API Calling using Axios

Handling GET Requests

For making GET requests with Axios, here’s a basic example:

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data: ', error);
      });
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Explanation:

• useState Hook: Use the useState hook to manage the state of your data (data in this example), which will store the fetched API response.
• useEffect Hook: Use the useEffect hook to perform side effects in your functional component. Here, Axios GET request is made inside useEffect with an empty dependency array ([]) to ensure it runs once when the component mounts.
• Axios GET Request: Use axios.get to make a GET request to the specified API endpoint (https://jsonplaceholder.typicode.com/posts). Axios returns a Promise, so you can chain .then() to handle the successful response and .catch() to handle errors.
• Updating State: Update the data state with the fetched data using setData(response.data).
• Rendering Data: Render the fetched data (data.map) in your JSX. In this example, it renders a list of post titles fetched from the API.

Handling POST Requests

For making POST requests with Axios, here’s a basic example:

function PostForm() {
  const [postData, setPostData] = useState({
    title: '',
    body: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.post('https://jsonplaceholder.typicode.com/posts', postData)
      .then(response => {
        console.log('Post created: ', response.data);
        // Optionally update state or do other tasks after successful post
      })
      .catch(error => {
        console.error('Error creating post: ', error);
        // Handle error
      });
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setPostData({
      ...postData,
      [name]: value
    });
  };

  return (
    <div>
      <h2>Create Post</h2>
      <form onSubmit={handleSubmit}>
        <label>
          Title:
          <input
            type="text"
            name="title"
            value={postData.title}
            onChange={handleChange}
          />
        </label>
        <br />
        <label>
          Body:
          <textarea
            name="body"
            value={postData.body}
            onChange={handleChange}
          />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default PostForm;

Explanation

• useState Hook: Initializes postData state to hold the form data (title and body) that will be sent in the POST request.
• handleSubmit Function: This function is called when the form is submitted (onSubmit event). It prevents the default form submission behavior (e.preventDefault()) and then makes a POST request using Axios.
• axios.post: Sends a POST request to the specified URL (https://jsonplaceholder.typicode.com/posts in this case) with the postData object as the data payload. Axios automatically serializes the data to JSON format.
• Handling Response: The .then() block handles the response returned by the server after the POST request is successfully processed. In this example, it logs the response data to the console. You can also update the component state, display a success message, or perform other actions based on the response.
• Error Handling: The .catch() block catches any errors that occur during the POST request (e.g., network issues, server errors). It logs the error to the console for debugging purposes. Depending on your application’s requirements, you can display error messages to users or implement other error handling logic.
• handleChange Function: Updates the postData state as the user types into the form inputs (onChange event). This ensures that the postData object reflects the current values of the form inputs.

Conclusion:

Axios is a versatile JavaScript library for making HTTP requests, favored for its:

• Simplicity: Clean API with Promises for asynchronous operations.
• Flexibility: Supports interceptors, cancellation, and global error handling.
• Compatibility: Works seamlessly in browsers and Node.js.
• Security: Built-in CSRF protection and JSON data handling.
• Community: Large support base with extensive documentation.

Considerations include its configuration flexibility and library size impact. Overall, Axios is ideal for efficient HTTP communication in JavaScript applications, ensuring reliable and scalable API interactions.

Frequently Asked Questions