Understanding and Implementing Schemas in Python

Understanding and Implementing Schemas in Python Introduction In the world of programming, particularly in the context of data management and validation, schemas play a vital role. A schema is essentially a blueprint or a predefined structure that defines the expected format, data types, and constraints for a given data entity. In this blog, we will delve into the concept of schemas in Python, exploring what they are, why they are important, and how you can implement them in your projects. What is a Schema? A schema serves as a contract between different components of a system, ensuring that data is consistent, valid, and well-structured. It defines the rules for how data should be organized, what fields it should contain, and what types of values those fields can hold. In essence, a schema acts as a set of rules that data must adhere to in order to be considered valid. Why Are Schemas Important? Data Validation: Schemas provide a way to validate incoming data. When data is received o

How to fetch data using Axios Http Get Request in React Js?

How to fetch data using  Axios - Http Get Request in React Js?

In one of my previous post, I had explained all about Fetch() method to retrieve data from api server.

In this post, I am going to demystify how to achieve same thing using axios. Axios has many advantages over fetch() method.

1) Axios has the ability to intercept HTTP request.

2) With axios.all() method, you can make simultaneous requests, simply send an array of request to this method, then use axios.spread() method to assign the properties of the response array to separate varialbes.

3) Axios automatically stringifies the data when sending requests, as in fetch() method, you would have to do it manually.

4) You can set response timeout.

5) Support backward compatibility, this is because it uses XMLhttprequest under the hood. 

fetch-user-data-using-axios-get-request
Fetch User Data Using Axios - Get Request

Installation:

npm install axios

or

yarn add axios

Sample Code:

A) index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />document.getElementById("root"));

B) App.js

import React from "react";
import "./style.css";
import Users from './Users'

export default function App() {
  return (
    <div>
      <Users />
    </div>
  );
}

C) Users.js

import React, { useStateuseEffect } from 'react';
import './style.css';
import axios from 'axios';

function Users() {
  const [userDatasetUserData] = useState([]);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((res=> {
        setUserData(res.data);
      })
      .catch((err=> console.log(err));
  }, []);

  return (
    <div>
      <h1>Fetch User Data Using Axios - Get Request</h1>
      <div id="divTable">
        {userData.map((item=> (
          <div id="divTableRow" key={item.id}>
            <div id="divTableColumn">{item.username}</div>
            <div id="divTableColumn">{item.name}</div>
            <div id="divTableColumn">{item.email}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Users;

D) style.css

#divTable {
  displaytable;
  widthauto;
  background-color#eee;
  border1px solid #666666;
  border-spacing5px;
}
#divTableRow {
  displaytable-row;
  widthauto;
  clearboth;
}
#divTableColumn {
  floatleft;
  displaytable-column;
  width200px;
  background-color#ccc;
}


Happy Learning!! Happy Coding!!

Comments

Popular posts from this blog

useNavigate and useLocation hooks react-router-dom-v6

How to implement error boundaries in React Js

Pass data from child component to its parent component in React Js

Create a Shopping Item App using React Js and Xstate

Localization in React Js

How to fetch data from an API using fetch() method in React Js

Routing in React using React-Router Version 6

Environment Setup and Installation for React Js Application

Create a custom calendar in React Js | Interview Question