Beginner's Guide to Using APIs with
JavaScript
This guide explains how to use APIs in JavaScript using the fetch() function. It includes
simple examples for both GET and POST requests, making it beginner-friendly and practical.
What is an API?
API stands for Application Programming Interface. It allows different software systems to
communicate with each other. For example, when you fetch data from a weather website or
send data to a server, you’re using an API.
Using fetch() in JavaScript
JavaScript provides a built-in method called fetch() to make HTTP requests. You can use it
to send and receive data from APIs.
Example 1: GET Request
This example fetches a list of users from a dummy API.
fetch('[Link]
.then(response => [Link]())
.then(data => [Link](data))
.catch(error => [Link]('Error:', error));
Explanation:
fetch('[Link] Initiates a
GET request to the specified URL.
.then(response => [Link]()): Parses the response as JSON.
.then(data => { ... }): Handles the parsed data.
.catch(error => { ... }): Catches and handles any errors that occur during
the fetch operation.
Example 2: POST Request
This example sends data to an API.
fetch('[Link] {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: [Link]({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => [Link]())
.then(data => [Link](data))
.catch(error => [Link]('Error:', error));
Explanation:
method: 'POST': Specifies the request method.
headers: Sets the request headers, indicating the content type.
body: [Link](postData): Converts the JavaScript object to a JSON
string for transmission.
Tips for Using fetch()
Error Handling: Always include .catch() to handle network errors.
Async/Await: For cleaner syntax, especially in asynchronous functions, consider
using async/await.
Example using async/await:
async function fetchPost() {
try {
const response = await fetch('[Link]
const data = await [Link]();
[Link]('Post Title:', [Link]);
} catch (error) {
[Link]('Error fetching data:', error);
fetchPost();
Tips for Beginners
• Always handle errors using .catch() when using fetch().
• Use [Link]() to convert data objects into JSON strings for POST requests.
• Use [Link]() to debug and understand API responses.
• Test with public dummy APIs like [Link].
Authentication:
[Link]
🔐 Authentication for Beginners (JavaScript/Web Dev)
📌 What is Authentication?
Authentication means verifying the identity of a user — making sure they are who they
say they are.
Example: Jab aap kisi website pe login karte ho using email & password — that's
authentication.
🧠 Why is it important?
To protect personal data
To restrict access to specific areas (like admin panel)
To keep user sessions secure
👇 Common Authentication Methods
1. Basic Authentication
Username + Password
Sent in HTTP headers (encoded in base64)
Not secure unless used with HTTPS
Authorization: Basic base64(username:password)
2. Session-Based Authentication
User logs in → Server creates a session → Session ID stored in a cookie
Every next request sends the cookie to identify the user
Session is stored on the server
✅ Easy to manage
❌ Not great for scalability
3. Token-Based Authentication (JWT)
JWT = JSON Web Token
User logs in → Server sends back a signed token (JWT)
Token is saved in browser (usually localStorage)
Every request includes token in headers
Authorization: Bearer <token>
✅ Stateless, scalable
❌ Can be stolen if not handled securely
// Example of sending token
fetch('/profile', {
method: 'GET',
headers: {
'Authorization': 'Bearer YOUR_JWT_TOKEN'
}
});
4. OAuth (Third-party Login like Google, Facebook)
Instead of creating new login system, use existing trusted providers
User gets redirected to Google/Facebook → Grants permission → Redirected back to
your app with token
✅ Easy login for users
❌ Slightly complex to implement for beginners