JavaScript: APIs (In-Depth)

An API (Application Programming Interface) is a set of rules and endpoints that lets programs or scripts communicate with each other. In web development, APIs usually mean "web APIs"—services you can call over the network to send or receive data.

Calling APIs from JavaScript

Use fetch() (modern) or XMLHttpRequest (legacy) to make HTTP requests from JS.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data));
    

How fetch() Works

• Returns a Promise
• First then() gives you a Response object
• Call .json(), .text(), etc. to get the data out

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => {/* use data */});
    

Common API Request Types

• GET: Retrieve data
• POST: Send new data
• PUT/PATCH: Update existing data
• DELETE: Remove data

Sending Data to an API

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Hello', body: 'World', userId: 1 })
})
  .then(res => res.json())
  .then(data => console.log(data));
    

Best Practices

• Always handle errors (.catch() or try/catch with async/await)
• Be aware of CORS (Cross-Origin Resource Sharing) restrictions
• Use HTTPS endpoints when possible