Module 8

Fetching Data From an API

• GET vs POST (Client-Side Only)
  GET is for reading data. POST is for sending data (like form inputs).
• API Keys
  Think of it like a password for accessing an API. We send it in headers or query params.
• How JSON Works Over the Web
  JSON (JavaScript Object Notation) is the standard format for sending data over the internet:
  • Serialization: Converting JavaScript objects to JSON strings for transmission

    // JavaScript object
    const user = { name: "John", age: 25, email: "john@example.com" };
    
    // Serialized to JSON string
    const jsonString = JSON.stringify(user);
    // Result: '{"name":"John","age":25,"email":"john@example.com"}'

  • Deserialization: Converting JSON strings back to JavaScript objects

    // JSON string received from server
    const jsonResponse = '{"id":1,"name":"John","status":"active"}';
    
    // Deserialized to JavaScript object
    const userData = JSON.parse(jsonResponse);
    // Result: { id: 1, name: "John", status: "active" }

  • Data Transfer Process:
    1. Client creates JavaScript object with data
    2. Object is serialized to JSON string using JSON.stringify()
    3. JSON string is sent over HTTP request
    4. Server receives JSON string and deserializes it
    5. Server processes the data and sends JSON response
    6. Client receives JSON response and deserializes it
  • Why JSON? Universal format that works across all programming languages and platforms
• Breaking Down a Request
  Every HTTP request has these key components:
  • URL: The web address where you're sending the request (e.g., https://api.example.com/users)
  • Method: The type of action you want to perform:
    • GET - Retrieve data (like reading a webpage)
    • POST - Send/create new data (like submitting a form)
    • PUT - Update existing data completely
    • PATCH - Update part of existing data
    • DELETE - Remove data
  • Headers: Additional information sent with the request:
    • Content-Type - Tells server what type of data you're sending (JSON, form data, etc.)
    • Authorization - API keys, tokens, or login credentials
    • User-Agent - Information about your browser/app
  • Body (optional): The actual data you're sending (only for POST, PUT, PATCH requests)
  • Query Parameters: Data added to the URL after ? (e.g., ?page=1&limit=10)
  Example Request as JSON:

  {
    "url": "https://api.example.com/users",
    "method": "POST",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer your-api-key-here",
      "User-Agent": "MyApp/1.0"
    },
    "body": {
      "name": "John Doe",
      "email": "john@example.com",
      "age": 25
    },
    "queryParams": {
      "page": 1,
      "limit": 10
    }
  }

• Async/Await Refresher + Axios
  Fetch API: Built-in browser method for making HTTP requests

  // GET request with fetch
  async function getData() {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error:', error);
    }
  }
  
  // POST request with fetch
  async function postData() {
    try {
      const response = await fetch('https://api.example.com/data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name: 'John', age: 30 })
      });
      const result = await response.json();
      console.log(result);
    } catch (error) {
      console.error('Error:', error);
    }
  }

  Axios: Popular third-party library for HTTP requests (more features)

  // GET request with axios
  async function getDataAxios() {
    try {
      const response = await axios.get('https://api.example.com/data');
      console.log(response.data);
    } catch (error) {
      console.error('Error:', error);
    }
  }
  
  // POST request with axios
  async function postDataAxios() {
    try {
      const response = await axios.post('https://api.example.com/data', {
        name: 'John',
        age: 30
      });
      console.log(response.data);
    } catch (error) {
      console.error('Error:', error);
    }
  }

  Key Differences:
  • Fetch: Built-in, requires manual JSON parsing, no automatic error handling
  • Axios: Third-party, automatic JSON parsing, better error handling, request/response interceptors
• Simple Flow Explanation
  Client ➡️ Request ➡️ Server evaluates ➡️ Response ➡️ Client receives
• POST Requests & Testing Endpoints
  POST requests are used to send data to servers (create, update, submit forms):
  • When to use POST: Creating new data, submitting forms, uploading files, authentication
  • Data in Body: POST requests include data in the request body (not URL)
  • Headers Required: Usually need Content-Type: application/json
  Testing API Endpoints:
  Use tools to test your API requests before coding:
  • Postman: Popular GUI tool for API testing
  • Insomnia: Lightweight alternative to Postman
  • Thunder Client: VS Code extension for API testing
  • cURL: Command-line tool for making requests
  📥 Download Postman (Free) Great for testing GET, POST, PUT, DELETE requests!