Reference Guide

Asynchronous JavaScript Fundamentals
Callbacks
Promises
Async/Await
Fetch API
AJAX & HTTP
Working with JSON
Practical Patterns
Best Practices
Common Mistakes

1. Asynchronous JavaScript Fundamentals

Synchronous vs Asynchronous

Synchronous: Code executes line by line, one at a time

console.log('First');
console.log('Second');
console.log('Third');
// Output: First, Second, Third (in order)

Asynchronous: Code can start tasks and continue without waiting

console.log('Start');
setTimeout(() => {
    console.log('Delayed');
}, 2000);
console.log('End');
// Output: Start, End, Delayed (after 2 seconds)

The Event Loop

Components:

Call Stack - Where code executes
Web APIs - Browser features (setTimeout, fetch, etc.)
Callback Queue - Completed async tasks wait here
Event Loop - Moves tasks from queue to stack when stack is empty

Key Concept: Even setTimeout(fn, 0) is asynchronous!

Common Async Operations

Timers: setTimeout(), setInterval()
Network requests: fetch(), AJAX calls
User events: addEventListener()
File operations (Node.js)

2. Callbacks

What is a Callback?

A function passed as an argument to another function, executed later.

function greet(name, callback) {
    console.log('Hello, ' + name);
    callback();
}

greet('Alice', () => {
    console.log('Callback executed!');
});

Async Callbacks

function fetchData(callback) {
    setTimeout(() => {
        const data = {id: 1, name: 'John'};
        callback(data);
    }, 1000);
}

fetchData((data) => {
    console.log('Received:', data.name);
});

Error-First Callback Pattern (Node.js)

function readFile(filename, callback) {
    setTimeout(() => {
        if (filename === 'valid.txt') {
            callback(null, 'File contents');  // Success
        } else {
            callback(new Error('File not found'), null);  // Error
        }
    }, 1000);
}

// Usage - ALWAYS check error first
readFile('valid.txt', (error, data) => {
    if (error) {
        console.error('Error:', error.message);
        return;
    }
    console.log('Data:', data);
});

Callback Hell

Problem: Nested callbacks become hard to read

getData(id, (error, data) => {
    getUser(data.userId, (error, user) => {
        getOrders(user.id, (error, orders) => {
            // Deeply nested - hard to maintain!
        });
    });
});

Solution: Use Promises or async/await (covered next)

3. Promises

What is a Promise?

A Promise represents a value that may be available now, in the future, or never.

Promise States:

Pending - Initial state, operation in progress
Fulfilled - Operation completed successfully
Rejected - Operation failed

Creating a Promise

const promise = new Promise((resolve, reject) => {
    const success = true;
    
    if (success) {
        resolve('Success!');  // Fulfill the promise
    } else {
        reject('Error!');     // Reject the promise
    }
});

Example with Timeout

function fetchUser(userId) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId > 0) {
                resolve({id: userId, name: 'Alice'});
            } else {
                reject(new Error('Invalid ID'));
            }
        }, 1000);
    });
}

Consuming Promises

Using .then() and .catch()

fetchUser(1)
    .then((user) => {
        console.log('User:', user.name);
    })
    .catch((error) => {
        console.error('Error:', error.message);
    })
    .finally(() => {
        console.log('Cleanup');  // Always runs
    });

Promise Chaining

fetchUser(1)
    .then(user => {
        console.log('Got user:', user.name);
        return fetchOrders(user.id);  // Return next promise
    })
    .then(orders => {
        console.log('Got orders:', orders);
        return fetchDetails(orders[0].id);
    })
    .then(details => {
        console.log('Got details:', details);
    })
    .catch(error => {
        console.error('Error:', error);  // Catches all errors
    });

Promise Static Methods

Promise.all() - All must succeed

const [users, posts, comments] = await Promise.all([
    fetchUsers(),
    fetchPosts(),
    fetchComments()
]);
// If ANY fails, entire Promise.all() fails

Promise.allSettled() - Wait for all

const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(result => {
    if (result.status === 'fulfilled') {
        console.log('Success:', result.value);
    } else {
        console.log('Failed:', result.reason);
    }
});
// All results returned, success or failure

Promise.race() - First to finish

const result = await Promise.race([fetchData(), timeout(5000)]);
// Returns first promise to settle (resolve or reject)

Promise.any() - First to succeed

const data = await Promise.any([cdn1(), cdn2(), cdn3()]);
// Returns first promise to fulfill (ignores rejections)

Comparison Table:

Method

Returns

Rejects When

Promise.all()

All results

Any fails

Promise.allSettled()

All results

Never

Promise.race()

First settled

First rejection

Promise.any()

First success

All fail

4. Async/Await

The Modern Way to Handle Async Code

Async/await makes asynchronous code look synchronous.

The async Keyword

// async function ALWAYS returns a Promise
async function greet() {
    return 'Hello';  // Wrapped in Promise.resolve()
}

// Same as:
function greet() {
    return Promise.resolve('Hello');
}

// Usage
greet().then(msg => console.log(msg));  // Hello

The await Keyword

async function fetchData() {
    // await pauses execution until promise resolves
    const user = await fetchUser(1);
    console.log(user.name);
    
    const orders = await fetchOrders(user.id);
    console.log(orders.length);
    
    return orders;
}

Rules:

Can ONLY use await inside async functions
await pauses execution until Promise resolves
Returns the resolved value

Error Handling with Try/Catch

async function loadData() {
    try {
        const user = await fetchUser(1);
        const orders = await fetchOrders(user.id);
        return {user, orders};
    } catch (error) {
        console.error('Error:', error.message);
        return null;
    } finally {
        console.log('Cleanup');  // Always runs
    }
}

Parallel vs Sequential

❌ Sequential (Slow) - 3 seconds total

async function sequential() {
    const user1 = await fetchUser(1);  // 1 second
    const user2 = await fetchUser(2);  // 1 second
    const user3 = await fetchUser(3);  // 1 second
    return [user1, user2, user3];
}

✅ Parallel (Fast) - 1 second total

async function parallel() {
    const [user1, user2, user3] = await Promise.all([
        fetchUser(1),
        fetchUser(2),
        fetchUser(3)
    ]);
    return [user1, user2, user3];
}

Converting Promises to Async/Await

Promises:

fetchUser(1)
    .then(user => fetchOrders(user.id))
    .then(orders => console.log(orders))
    .catch(error => console.error(error));

Async/Await:

async function getData() {
    try {
        const user = await fetchUser(1);
        const orders = await fetchOrders(user.id);
        console.log(orders);
    } catch (error) {
        console.error(error);
    }
}

5. Fetch API

Basic Syntax

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

With async/await (Recommended):

async function getData() {
    try {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

GET Request

async function getUser(id) {
    try {
        const response = await fetch(`/api/users/${id}`);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const user = await response.json();
        return user;
    } catch (error) {
        console.error('Error:', error);
        return null;
    }
}

POST Request

async function createUser(userData) {
    try {
        const response = await fetch('/api/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(userData)
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const newUser = await response.json();
        return newUser;
    } catch (error) {
        console.error('Error:', error);
        return null;
    }
}

// Usage
const userData = {name: 'John', email: '[email protected]'};
const user = await createUser(userData);

PUT Request (Update)

async function updateUser(id, userData) {
    const response = await fetch(`/api/users/${id}`, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(userData)
    });
    return await response.json();
}

PATCH Request (Partial Update)

async function updateEmail(id, newEmail) {
    const response = await fetch(`/api/users/${id}`, {
        method: 'PATCH',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({email: newEmail})
    });
    return await response.json();
}

DELETE Request

async function deleteUser(id) {
    const response = await fetch(`/api/users/${id}`, {
        method: 'DELETE'
    });
    return response.ok;  // Returns true if successful
}

Response Object

Important Properties:

const response = await fetch(url);

console.log(response.status);      // 200, 404, 500, etc.
console.log(response.statusText);  // "OK", "Not Found"
console.log(response.ok);          // true if 200-299
console.log(response.headers);     // Headers object
console.log(response.url);         // Final URL

Response Methods:

await response.json()          // Parse as JSON
await response.text()          // Parse as text
await response.blob()          // Parse as Blob (images, files)
await response.formData()      // Parse as FormData
await response.arrayBuffer()   // Parse as ArrayBuffer

Request Headers

const response = await fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_TOKEN',
        'X-Custom-Header': 'value'
    },
    body: JSON.stringify(data)
});

Fetch Options

fetch(url, {
    method: 'GET',              // HTTP method
    headers: {},                // Request headers
    body: null,                 // Request body
    mode: 'cors',               // cors, no-cors, same-origin
    credentials: 'omit',        // omit, same-origin, include
    cache: 'default',           // Cache mode
    redirect: 'follow',         // Redirect handling
    signal: null                // AbortSignal for cancellation
})

Aborting Requests

const controller = new AbortController();

// Start request
const promise = fetch(url, { signal: controller.signal });

// Cancel after 5 seconds
setTimeout(() => controller.abort(), 5000);

// Handle abort
try {
    const response = await promise;
    const data = await response.json();
} catch (error) {
    if (error.name === 'AbortError') {
        console.log('Request cancelled');
    }
}

CRITICAL: Fetch Doesn't Reject on HTTP Errors!

// ❌ This won't catch 404 or 500 errors
try {
    const response = await fetch(url);
    const data = await response.json();  // Might fail here!
} catch (error) {
    // Only catches network errors
}

// ✅ ALWAYS check response.ok
try {
    const response = await fetch(url);
    
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
} catch (error) {
    console.error('Error:', error);
}

6. AJAX & HTTP

What is AJAX?

AJAX = Asynchronous JavaScript and XML (Despite the name, we use JSON now, not XML)

Technique for:

Updating parts of a page without reloading
Requesting data from servers asynchronously
Sending data to servers in the background

HTTP Request/Response Cycle

Request Parts:

Method - GET, POST, PUT, DELETE, etc.
URL - Resource path
Headers - Metadata (Content-Type, Authorization)
Body - Data being sent (optional)

Response Parts:

Status Code - 200, 404, 500, etc.
Headers - Response metadata
Body - Response data

HTTP Status Codes

2xx - Success

200 OK - Request succeeded
201 Created - Resource created
204 No Content - Success, no response body

4xx - Client Error

400 Bad Request - Invalid request
401 Unauthorized - Authentication required
403 Forbidden - Access denied
404 Not Found - Resource doesn't exist

5xx - Server Error

500 Internal Server Error - Server crashed
503 Service Unavailable - Server overloaded

HTTP Methods (CRUD)

Operation

Method

Purpose

Create

POST

Create new resource

Read

GET

Retrieve resource

Update (full)

PUT

Replace entire resource

Update (partial)

PATCH

Modify resource

Delete

DELETE

Remove resource

RESTful API Conventions

URL Patterns:

GET    /api/users           - List all users
POST   /api/users           - Create new user
GET    /api/users/123       - Get user 123
PUT    /api/users/123       - Update user 123
DELETE /api/users/123       - Delete user 123

GET    /api/users/123/posts - Get posts by user 123

Query Parameters:

GET /api/users?role=admin              - Filter
GET /api/users?sort=name&order=asc     - Sort
GET /api/users?page=2&limit=10         - Paginate
GET /api/users?search=john             - Search

Best Practices:

Use nouns for resources (/users not /getUsers)
Use HTTP methods for actions
Use plural nouns (/users not /user)
Be consistent
Version your API (/api/v1/users)

7. Working with JSON

JSON Syntax

{
  "name": "John Doe",
  "age": 30,
  "email": "[email protected]",
  "isActive": true,
  "roles": ["admin", "user"],
  "address": {
    "street": "123 Main St",
    "city": "Boston"
  }
}

Rules:

Property names in double quotes
String values in double quotes
No trailing commas
No comments
No functions

JSON vs JavaScript Object

// JavaScript Object
const obj = {
    name: 'John',           // No quotes on keys
    greet() { }             // Functions allowed
};

// JSON String
const json = '{"name":"John"}';  // Keys quoted, no functions

JSON.stringify() - Object to JSON String

const user = {
    name: 'Alice',
    age: 25,
    email: '[email protected]'
};

// Convert to JSON string
const jsonString = JSON.stringify(user);
console.log(jsonString);
// {"name":"Alice","age":25,"email":"[email protected]"}

// Pretty print with indentation
const pretty = JSON.stringify(user, null, 2);
console.log(pretty);
/*
{
  "name": "Alice",
  "age": 25,
  "email": "[email protected]"
}
*/

JSON.parse() - JSON String to Object

const jsonString = '{"name":"Bob","age":30}';

// Convert to JavaScript object
const user = JSON.parse(jsonString);

console.log(user.name);  // Bob
console.log(user.age);   // 30

JSON with Fetch

// Sending JSON (POST)
const response = await fetch('/api/users', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(userData)  // Object to JSON string
});

// Receiving JSON
const data = await response.json();  // JSON string to object

Important: JSON Limitations

const data = {
    name: 'Charlie',
    age: undefined,      // Will be omitted!
    greet: function() {  // Will be omitted!
        return 'Hi';
    },
    date: new Date()     // Becomes string!
};

const json = JSON.stringify(data);
console.log(json);  // {"name":"Charlie","date":"2024-02-08T12:00:00.000Z"}

8. Practical Patterns

Complete API Request Pattern

async function apiRequest(endpoint, options = {}) {
    const url = `https://api.example.com${endpoint}`;
    
    try {
        const response = await fetch(url, {
            ...options,
            headers: {
                'Content-Type': 'application/json',
                ...options.headers
            }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        // Handle empty responses (like DELETE)
        if (response.status === 204) {
            return null;
        }
        
        return await response.json();
    } catch (error) {
        console.error('API Error:', error);
        throw error;
    }
}

// Usage
const users = await apiRequest('/users');
const newUser = await apiRequest('/users', {
    method: 'POST',
    body: JSON.stringify({name: 'John'})
});

Loading States

async function loadData() {
    const button = document.querySelector('button');
    const contentDiv = document.getElementById('content');
    
    button.disabled = true;
    button.textContent = 'Loading...';
    
    try {
        const response = await fetch('/api/data');
        
        if (!response.ok) {
            throw new Error('Failed to load');
        }
        
        const data = await response.json();
        contentDiv.innerHTML = renderData(data);
    } catch (error) {
        contentDiv.innerHTML = `<p class="error">${error.message}</p>`;
    } finally {
        button.disabled = false;
        button.textContent = 'Load Data';
    }
}

Debouncing (Search Input)

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// Usage
const searchInput = document.getElementById('search');

async function search(query) {
    if (query.length < 2) return;
    const results = await fetch(`/api/search?q=${query}`);
    displayResults(results);
}

searchInput.addEventListener('input', debounce(search, 300));

Retry Logic

async function fetchWithRetry(url, maxRetries = 3) {
    for (let i = 0; i < maxRetries; i++) {
        try {
            const response = await fetch(url);
            if (!response.ok) throw new Error('HTTP error');
            return await response.json();
        } catch (error) {
            if (i === maxRetries - 1) throw error;
            
            // Exponential backoff
            await new Promise(resolve => 
                setTimeout(resolve, 1000 * Math.pow(2, i))
            );
        }
    }
}

Caching

const cache = new Map();

async function fetchWithCache(url, ttl = 60000) {
    // Check cache
    if (cache.has(url)) {
        const {data, timestamp} = cache.get(url);
        if (Date.now() - timestamp < ttl) {
            return data;  // Return cached
        }
        cache.delete(url);
    }
    
    // Fetch fresh
    const response = await fetch(url);
    const data = await response.json();
    
    // Cache it
    cache.set(url, {data, timestamp: Date.now()});
    
    return data;
}

Error Handling by Status Code

async function handleRequest(url) {
    try {
        const response = await fetch(url);
        
        if (response.status === 404) {
            throw new Error('Resource not found');
        }
        
        if (response.status === 401) {
            throw new Error('Please log in');
        }
        
        if (response.status === 403) {
            throw new Error('Access denied');
        }
        
        if (response.status >= 500) {
            throw new Error('Server error');
        }
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        return null;
    }
}

9. Best Practices

1. Always Handle Errors

// Bad
const data = await fetch(url).then(r => r.json());

// Good
try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('HTTP error');
    const data = await response.json();
} catch (error) {
    console.error('Error:', error);
}

2. Check response.ok

// ❌ Bad - doesn't catch HTTP errors
const data = await response.json();

// Good
if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();

3. Use JSON.stringify() for POST/PUT

// ❌ Bad
body: {name: 'John'}  // This is an object!

// ✅ Good
body: JSON.stringify({name: 'John'})  // String

4. Set Content-Type Header

// ✅ Always include for JSON
headers: {
    'Content-Type': 'application/json'
}

5. Show Loading States

// Always give user feedback
showLoading();
try {
    await fetchData();
} finally {
    hideLoading();
}

6. Use Promise.all() for Parallel Requests

// Slow - sequential
const a = await fetch(url1);
const b = await fetch(url2);

// Fast - parallel
const [a, b] = await Promise.all([
    fetch(url1),
    fetch(url2)
]);

7. Debounce Search Inputs

// ✅ Prevent excessive API calls
searchInput.addEventListener('input', 
    debounce(search, 300)
);

8. Never Expose API Keys in Frontend

// ❌ NEVER!
const API_KEY = 'sk_live_secret123';

// ✅ Use backend proxy
fetch('/api/proxy/data');  // Backend adds key

9. Validate User Input

if (!userData.email || !isValidEmail(userData.email)) {
    throw new Error('Invalid email');
}

10. Use Appropriate HTTP Methods

GET    /users      - Retrieve
POST   /users      - Create
PUT    /users/1    - Update
DELETE /users/1    - Delete

10. Common Mistakes

1. Forgetting await

// Wrong
const user = fetchUser();  // Returns Promise!
console.log(user.name);    // undefined

// Correct
const user = await fetchUser();
console.log(user.name);

2. Not Checking response.ok

// Wrong - doesn't catch 404, 500
const data = await response.json();

// Correct
if (!response.ok) throw new Error('HTTP error');
const data = await response.json();

3. Forgetting JSON.stringify()

// Wrong
body: {name: 'John'}

// Correct
body: JSON.stringify({name: 'John'})

4. Sequential Instead of Parallel

// ❌ Slow - 3 seconds
const a = await fetch(url1);
const b = await fetch(url2);
const c = await fetch(url3);

// ✅ Fast - 1 second
const [a, b, c] = await Promise.all([
    fetch(url1),
    fetch(url2),
    fetch(url3)
]);

5. Not Handling Errors

// ❌ No error handling
const data = await fetch(url).then(r => r.json());

// ✅ With error handling
try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Failed');
    const data = await response.json();
} catch (error) {
    console.error(error);
}

6. Using .then() with async/await

// Mixing styles - confusing
async function mixed() {
    const response = await fetch(url);
    return response.json().then(data => data);
}

// Consistent async/await
async function clean() {
    const response = await fetch(url);
    const data = await response.json();
    return data;
}

7. Not Disabling Buttons During Requests

// ❌ User can click multiple times
async function submit() {
    await fetch(url, {method: 'POST'});
}

// ✅ Disable during request
async function submit() {
    button.disabled = true;
    try {
        await fetch(url, {method: 'POST'});
    } finally {
        button.disabled = false;
    }
}

Quick Reference

Fetch Template

async function fetchData() {
    try {
        const response = await fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
        return null;
    }
}

CRUD Operations

// CREATE
const response = await fetch('/api/users', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(userData)
});

// READ
const response = await fetch('/api/users/1');
const user = await response.json();

// UPDATE
const response = await fetch('/api/users/1', {
    method: 'PUT',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(userData)
});

// DELETE
const response = await fetch('/api/users/1', {
    method: 'DELETE'
});

Promise Methods

// All must succeed
await Promise.all([p1, p2, p3]);

// Wait for all (success or failure)
await Promise.allSettled([p1, p2, p3]);

// First to finish
await Promise.race([p1, p2, p3]);

// First to succeed
await Promise.any([p1, p2, p3]);

Practice APIs

Free APIs for Testing:

JSONPlaceholder - https://jsonplaceholder.typicode.com/
Dog API - https://dog.ceo/dog-api/
Pokemon API - https://pokeapi.co/
GitHub API - https://api.github.com/
Open Weather - https://openweathermap.org/api

PreviousReference Guide NextReference Guide

Last updated 1 month ago

Good morning

hashtagTable of Contents

hashtag1. Asynchronous JavaScript Fundamentals

hashtagSynchronous vs Asynchronous

hashtagThe Event Loop

hashtagCommon Async Operations

hashtag2. Callbacks

hashtagWhat is a Callback?

hashtagAsync Callbacks

hashtagError-First Callback Pattern (Node.js)

hashtagCallback Hell

hashtag3. Promises

hashtagWhat is a Promise?

hashtagCreating a Promise

hashtagExample with Timeout

hashtagConsuming Promises

hashtagPromise Chaining

hashtagPromise Static Methods

hashtag4. Async/Await

hashtagThe Modern Way to Handle Async Code

hashtagThe async Keyword

hashtagThe await Keyword

hashtagError Handling with Try/Catch

hashtagParallel vs Sequential

hashtagConverting Promises to Async/Await

hashtag5. Fetch API

hashtagBasic Syntax

hashtagGET Request

hashtagPOST Request

hashtagPUT Request (Update)

hashtagPATCH Request (Partial Update)

hashtagDELETE Request

hashtagResponse Object

hashtagRequest Headers

hashtagFetch Options

hashtagAborting Requests

hashtagCRITICAL: Fetch Doesn't Reject on HTTP Errors!

hashtag6. AJAX & HTTP

hashtagWhat is AJAX?

hashtagHTTP Request/Response Cycle

hashtagHTTP Status Codes

hashtagHTTP Methods (CRUD)

hashtagRESTful API Conventions

hashtag7. Working with JSON

hashtagJSON Syntax

hashtagJSON vs JavaScript Object

hashtagJSON.stringify() - Object to JSON String

hashtagJSON.parse() - JSON String to Object

hashtagJSON with Fetch

hashtagImportant: JSON Limitations

hashtag8. Practical Patterns

hashtagComplete API Request Pattern

hashtagLoading States

hashtagDebouncing (Search Input)

hashtagRetry Logic

hashtagCaching

hashtagError Handling by Status Code

hashtag9. Best Practices

hashtag1. Always Handle Errors

hashtag2. Check response.ok

hashtag3. Use JSON.stringify() for POST/PUT

hashtag4. Set Content-Type Header

hashtag5. Show Loading States

hashtag6. Use Promise.all() for Parallel Requests

hashtag7. Debounce Search Inputs

hashtag8. Never Expose API Keys in Frontend

hashtag9. Validate User Input

hashtag10. Use Appropriate HTTP Methods

hashtag10. Common Mistakes

hashtag1. Forgetting await

hashtag2. Not Checking response.ok

hashtag3. Forgetting JSON.stringify()

hashtag4. Sequential Instead of Parallel

hashtag5. Not Handling Errors

hashtag6. Using .then() with async/await

hashtag7. Not Disabling Buttons During Requests

hashtagQuick Reference

hashtagFetch Template

hashtagCRUD Operations

hashtagPromise Methods

Table of Contents