online courses : August 2025

Sunday, August 31, 2025

Javascript Module 59

Javascript Module 59

If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page

https://onlinecourses2024for.blogspot.com/p/contact-us.html/

Javascript Module 59

Module 59 : Async/Await and APIs in Javascript.

1 Core concepts

Promises (recap)

A Promise represents a value that may be available now, later, or never.

Key states: pending → fulfilled (resolved) or rejected. Use .then() for success, .catch() for failure. async/await is syntactic sugar over Promises that makes asynchronous code look synchronous.

Event loop & microtasks

await pauses the async function, but it doesn’t block the thread. The rest of the code runs — the resolved value is scheduled as a microtask (runs right after current synchronous code completes). Understanding microtasks helps explain execution order of Promises vs setTimeout.

async / await syntax

async function getUser(id) { const res = await fetch(`/api/users/${id}`); if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); }

An async function always returns a Promise.

Use await to get the resolved value of a Promise. Surround with try/catch for error handling.

Error handling

try { const data = await getUser(1); } catch (err) { // handle network errors, HTTP errors, JSON parse errors... }

If fetch is aborted or the network fails it rejects (throws). If res.ok is false you may want to throw manually.

Sequential vs Parallel

Sequential:

const a = await fetchA(); const b = await fetchB(); // waits for A first

Parallel:

const [a, b] = await Promise.all([fetchA(), fetchB()]);

Promise.all fails fast (rejects on first rejection). Use allSettled when you want results even if some fail.

Cancellation: AbortController

Browser fetch supports AbortController. Abort signals cause fetch to reject with an AbortError.

const ac = new AbortController(); fetch(url, { signal: ac.signal }); // cancel later: ac.abort();

Fetch API — quick reference

fetch(input, init) returns a Response. Important Response methods:

res.json()

res.text()

res.blob()

res.arrayBuffer()

res.body (for streaming: ReadableStream)

Fetch init common options:

method, headers, body, credentials, mode, cache, signal (AbortController).

Handling different response types

JSON: await res.json() (catches parse errors)

Text: await res.text()

Binary: await res.blob() or arrayBuffer()

Streaming responses (NDJSON, chunked)

You can process response increments using res.body.getReader() and TextDecoder. Useful for streaming APIs (progressive updates).

Authentication & headers

API key / Bearer token: Authorization: Bearer <token>

For browser apps: prefer secure cookies (HttpOnly, SameSite) for session tokens; avoid storing secrets in front-end code.

CORS basics

Cross-origin requests require the server to send appropriate Access-Control-* headers. Preflight OPTIONS requests are used when request uses non-simple headers or methods.

Retry & backoff

Use exponential backoff with jitter for retrying idempotent requests. Avoid retrying non-idempotent requests (POST without idempotency guarantees).

Uploading files & progress

Use FormData for multipart uploads. For progress you usually rely on XMLHttpRequest or Axios (which has onUploadProgress), because fetch lacks upload progress in some environments.

2 (well-tested patterns)

Below are small utilities you can drop into projects.

1) fetchJSON with status check

async function fetchJSON(url, options = {}) { const res = await fetch(url, options); if (!res.ok) { const text = await res.text().catch(() => ''); throw new Error(`HTTP ${res.status} ${res.statusText} ${text ? ' - ' + text : ''}`); } return res.json(); }

2) fetchWithTimeout

async function fetchWithTimeout(url, options = {}, timeout = 8000) { const controller = new AbortController(); const id = setTimeout(() => controller.abort(), timeout); try { const res = await fetch(url, { ...options, signal: controller.signal }); if (!res.ok) throw new Error(`HTTP ${res.status}`); return res; } finally { clearTimeout(id); } }

3) retryWithBackoff

4) Debounce helper (useful for search inputs)

function debounce(fn, wait = 300) { let id; return (...args) => { clearTimeout(id); id = setTimeout(() => fn(...args), wait); }; }

5) Abortable search (debounce + AbortController)

6) Streaming NDJSON parser

async function streamNDJSON(url, onItem) { const res = await fetch(url); if (!res.body) throw new Error('ReadableStream not supported'); const reader = res.body.getReader(); const decoder = new TextDecoder(); let buf = ''; while (true) { const { done, value } = await reader.read(); if (done) break; buf += decoder.decode(value, { stream: true }); const lines = buf.split('\n'); buf = lines.pop(); for (const line of lines) { if (line.trim()) onItem(JSON.parse(line)); } } if (buf.trim()) onItem(JSON.parse(buf)); }

3 Concrete

Example A — Basic JSON fetch (browser)

<input id="userId" value="1" /> <button id="btn">Load</button> <pre id="out"></pre> <script> async function loadUser(id) { const res = await fetch(`/api/users/${id}`); if (!res.ok) throw new Error('Failed to load user'); return res.json(); } document.getElementById('btn').addEventListener('click', async () => { const id = document.getElementById('userId').value; try { const user = await loadUser(id); document.getElementById('out').textContent = JSON.stringify(user, null, 2); } catch (err) { document.getElementById('out').textContent = 'Error: ' + err.message; } }); </script>

Explanation: loadUser awaits the fetch. If fetch resolves with ok=false (e.g., 404), we throw to let caller handle errors.

Example B — Parallel fetch of multiple endpoints

async function loadDashboard(userId) { const userPromise = fetchJSON(`/api/users/${userId}`); const feedPromise = fetchJSON(`/api/users/${userId}/feed`); const notificationsPromise = fetchJSON(`/api/users/${userId}/notifications`); // Run in parallel, wait for all: const [user, feed, notifications] = await Promise.all([userPromise, feedPromise, notificationsPromise]); return { user, feed, notifications }; }

Explanation: starting promises immediately and await-ing Promise.all makes the requests concurrent.

Example C — Retry with backoff for GET requests

async function getWithRetry(url) { return retryWithBackoff(() => fetchJSON(url), { retries: 4 }); }

Explanation: retries network blips. Only use for safe idempotent requests.

Example D — Upload file with progress (Axios)

import axios from 'axios'; const formData = new FormData(); formData.append('file', fileInput.files[0]); await axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: (progressEvent) => { const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total); console.log('Upload', percent, '%'); } });

Explanation: fetch currently lacks consistent upload progress events across browsers, so Axios or XMLHttpRequest is used for progress UI.

4 Exercises (explanations)

Exercise 1 — Simple fetch

Fetch posts from JSONPlaceholder (https://jsonplaceholder.typicode.com/posts) and display first 10 titles.

Hint/solution: use await fetch → res.json() → slice and render.

Exercise 2 — Debounced search with cancel

Make a search input that hits https://jsonplaceholder.typicode.com/users?name_like=<q> with 300ms debounce. Cancel previous fetch on new input with AbortController.

Explanation: debounce reduces requests; AbortController prevents race conditions and wasted work.

Exercise 3 — Parallel vs Sequential timing

Write two functions, sequentialFetch(urls) and parallelFetch(urls). Measure time (performance.now()) when fetching 5 endpoints. Observe parallel is faster when network concurrency is available.

Explanation: illustrate cost of awaiting each request vs kicking off all promises then awaiting them together.

Exercise 4 — Retry + Backoff

Write getWithRetry(url) that retries up to 4 times with exponential backoff and jitter. Test this by creating a mock API that fails the first 2 tries.

Explanation: show retryWithBackoff utility in action.

Exercise 5 (Advanced) — Infinite scroll + cache + cancelable search

Build a single-page app that:

Shows posts from JSONPlaceholder with infinite scrolling (fetch next page when user nears bottom).

Implements a search bar with debounce + AbortController cancel.

Caches fetched pages in localStorage or IndexedDB to avoid re-fetching.

Handles errors gracefully and implements retry for GETs.

Solution outline: use page parameter, track isLoading, fetch pages in parallel when necessary, store results with timestamp in cache and validate TTL.

5 Full “Searchable Infinite Posts”

Purpose: Put everything together — fetch, concurrency, abort, caching, infinite scroll.

Stack: HTML + Vanilla JS (no frameworks) + public API https://jsonplaceholder.typicode.com/posts.

File structure

lab/

index.html

main.js

styles.css

Step 1 — Basic UI

A search input and a container for posts + spinner.

Step 2 — Fetch helper

Add fetchJSON and fetchWithTimeout utilities.

Step 3 — Search with debounce + abort

Debounce user input.

Abort previous search fetch when a new input arrives.

If query is empty, show paginated feed.

Step 4 — Infinite scroll

Track currentPage.

On scroll near bottom, call loadPage(page+1).

isLoading prevents duplicate loads.

Step 5 — Caching

Store fetched pages in localStorage with a TTL (e.g., 5 minutes).

On load, check cache first.

Step 6 — Retry for transient errors

Wrap GETs with retryWithBackoff.

Step 7 — Polishing

Error messages & retry button

Loading indicators

UX: disable next fetch if no more pages

Example snippet (main pieces)

// main.js (abridged) const cacheTTL = 5 * 60 * 1000; function cacheGet(key) { try { const raw = localStorage.getItem(key); if (!raw) return null; const { ts, data } = JSON.parse(raw); if (Date.now() - ts > cacheTTL) { localStorage.removeItem(key); return null; } return data; } catch { return null; } } function cacheSet(key, data) { localStorage.setItem(key, JSON.stringify({ ts: Date.now(), data })); } // fetch page async function loadPage(page = 1) { const cacheKey = `posts-page-${page}`; const cached = cacheGet(cacheKey); if (cached) return cached; const url = `https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`; const data = await retryWithBackoff(() => fetchJSON(url)); cacheSet(cacheKey, data); return data; }

Assessment

Working infinite scroll: 30%

Debounce + cancel: 20%

Caching + TTL: 20%

Error handling & retry: 15%

Code quality + comments: 15%

6 Testing & mocking HTTP

Unit test approach

Use Jest for unit tests.

Use msw (Mock Service Worker) to intercept and mock fetch() on both browser tests and node tests (msw supports node). This avoids calling network endpoints and gives realistic behavior.

Simple test example (Jest + msw)

// __tests__/fetch.test.js import { rest } from 'msw'; import { setupServer } from 'msw/node'; import { fetchJSON } from '../main'; const server = setupServer( rest.get('https://jsonplaceholder.typicode.com/posts', (req, res, ctx) => { return res(ctx.json([{ id: 1, title: 'hello' }])); }) ); beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => server.close()); test('fetchJSON returns posts', async () => { const data = await fetchJSON('https://jsonplaceholder.typicode.com/posts'); expect(Array.isArray(data)).toBe(true); expect(data[0].title).toBe('hello'); });

Benefits: test both success and failure scenarios (network error, timeouts, 500 responses).

7 Security

Never embed secret API keys in client-side code. Use a proxy server or signed short-lived tokens.

Prefer HttpOnly cookies for authentication where appropriate (prevents XSS reading).

Sanitize data and avoid using innerHTML with untrusted content.

Use Content-Security-Policy (CSP), X-Frame-Options, and other headers.

Validate server responses — do not assume schema correctness.

Performance

Use caching: Cache-Control, ETag/If-None-Match, and client-side caches (IndexedDB) for offline.

Use Promise.all for independent requests.

Use HTTP/2 or HTTP/3 where possible for multiplexing.

Use pagination to limit response sizes.

Reliability

Use retries with exponential backoff and jitter for transient network errors.

Respect rate limits returned by APIs; implement client-side rate limiting.

Add health checks on servers and circuit breakers in client-side heavy systems.

8 Advanced topics

Streaming & incremental UI updates: use res.body.getReader() to process large responses or server-sent chunks.

Server-Sent Events (SSE) for one-way streaming: good for feed-like updates.

WebSockets for low-latency bi-directional communication.

GraphQL: how async patterns differ for queries and subscriptions.

Service Workers for offline caching of API results and background sync.

OAuth2 flows: Authorization Code flow (with PKCE) for SPAs — design considerations.

gRPC-web for binary, typed remote calls.

9 Research coding specialist

Good topics to take to a specialist for discussion:

Cancellation patterns — compare AbortController vs token-based cancellation across libraries and polyfills; how to cancel server-side processing safely.

Streaming APIs — example with NDJSON vs SSE vs chunked JSON: performance & parsing strategies.

Idempotency & retries — how to design backend idempotency keys for safe retries on POST.

Rate limiting & backpressure — client strategies when API returns 429, and token bucket algorithms on the client.

Testing network resilience — chaos testing for flaky networks; how to mock timeouts/latency in integration tests.

Security — token storage tradeoffs (cookies vs localStorage) in complex SPAs with third-party scripts.

Observability — best metrics for client API health (latency histograms, error rates, % of aborted requests).

Suggested reading / reference list

MDN: fetch, Promises, AbortController

WHATWG Fetch Standard

ECMAScript Language Specification (Promises and async functions)

Jake Archibald’s posts on streams & progressive loading

10 Quick sheet (common patterns)

Check status + parse JSON

const res = await fetch(url); if (!res.ok) throw new Error(res.status); const data = await res.json();

Timeout

const controller = new AbortController(); setTimeout(() => controller.abort(), 5000); await fetch(url, { signal: controller.signal });

Parallel

const [a, b] = await Promise.all([fetchA(), fetchB()]);

Graceful parallel (some can fail)

const results = await Promise.allSettled([p1, p2]);

Abortable search

Debounce input.

Abort previous controller before starting new fetch.

Friday, August 29, 2025

Javascript Module 58

Javascript Module 58

https://onlinecourses2024for.blogspot.com/p/contact-us.html/

Javascript Module 58

Module 58 : Working with Async.

1. What is Asynchronous Programming?

JavaScript is single-threaded, meaning it can execute only one operation at a time. But it supports non-blocking asynchronous operations, such as:

Fetching data from an API

Reading files

Timers (setTimeout, setInterval)

Event listeners

This allows faster execution and responsive applications.

2. Understanding the Core Concepts

2.1 ✅ Callbacks

A callback is a function passed as an argument to another function and executed after an operation is completed.

function getData(callback) { setTimeout(() => { callback("Data received!"); }, 2000); } getData(function(message) { console.log(message); // Output: Data received! });

Problem: Callback Hell — nesting too many callbacks makes code messy and hard to debug.

2.2 📦 Promises

A Promise represents a value that may be available now, later, or never.

resolve() is called when the async operation is successful, reject() when there is an error.

2.3 🔁 async/await (Modern Syntax)

async/await is syntactic sugar over promises. It makes async code look synchronous, improving readability.

async function loadData() { try { const response = await fetchData(); // waits for promise to resolve console.log(response); } catch (error) { console.error(error); } } loadData();

Much easier to read, handle, and maintain compared to .then() chaining.

3. Examples

Example 1: Simulate API Call

Example 2: Error Handling with Async

4. Exercises

Exercise 1: Write a function delayPrint(msg, delay) that prints a message after a delay.

This chaining multiple async tasks in order using await.

Exercise 2: Fetch data using fetch() from a public API

async function fetchUser() { try { const response = await fetch("https://jsonplaceholder.typicode.com/users/1"); const user = await response.json(); console.log(user.name); } catch (error) { console.error("Error fetching user:", error); } } fetchUser();

API interaction.

Guidance

Use animation/diagram to explain call stack, Web APIs, callback queue, and event loop.

Compare synchronous vs asynchronous execution with examples.

code callback, promise, and async/await examples.

Show how callback hell can be avoided using promises and async/await.

Guided

Ask them to write a getWeather(city) function that fetches weather data from an API.

Debugging Tips

Why is my function returning undefined? (Explain awaiting the result.)

How to catch multiple errors across nested async calls?

When to use Promise.all()?

6. Research Insights (Coding Specialist’s View)

Concept

Best Practice

Reason

Async/Await

Always wrap in try/catch

Prevents crashing due to uncaught errors

Promises

Use chaining .then() only when simple

Improves readability in small scenarios

API Calls

Use async/await for better structure

Easier to debug and maintain

Performance

Use Promise.all() when parallel calls are possible

Speeds up execution

Add loading indicators while awaiting

Better user experience

👨‍💻 Coding Insight: Mixing async/await and .then() can lead to confusion. Stick to one style per function.

Tip : Using Promise.all()

async function fetchMultiple() { const [user, posts] = await Promise.all([ fetch("https://jsonplaceholder.typicode.com/users/1").then(res => res.json()), fetch("https://jsonplaceholder.typicode.com/posts/1").then(res => res.json()) ]); console.log("User:", user.name); console.log("Post Title:", posts.title); }

Great for optimizing multiple independent API requests.

Summary

Concept

Purpose

Syntax Style

Callback

Run function after completion

callback()

Promise

Manage success/failure

.then().catch()

Async/Await

Clean, readable async code

async function, await keyword

Module Files (Optional for Distribution)

async-demo.html – HTML with embedded JS examples

async-exercises.js – Exercises with solutions

async-project.js – Mini project (fetch API + UI)

Wednesday, August 27, 2025

Javascript Module 57

Javascript Module 57

https://onlinecourses2024for.blogspot.com/p/contact-us.html/

Javascript Module 57

Module 57 : Fetching Data with fetch().

1. Introduction to fetch()

What is fetch()?

The fetch() method is a built-in JavaScript API used to make HTTP requests to servers. It is part of the modern JavaScript standard and replaces older techniques like XMLHttpRequest.

Syntax:

fetch(resource, options)

resource: The URL (or Request object) to fetch.

options: An optional object for custom settings (like method, headers, body).

2. The Basic Structure of fetch()

fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // Parse JSON }) .then(data => { console.log(data); // Use the data }) .catch(error => { console.error('There has been a problem with your fetch operation:', error); });

1: Fetch JSON Data from Public API

Objective:

Fetch user data from the public API and display it on the webpage.

Steps:

Use this free API: https://jsonplaceholder.typicode.com/users

Create an HTML page with a button: "Load Users"

Use fetch() to get data and display name, email, and city.

HTML:

<button onclick="loadUsers()">Load Users</button> <div id="output"></div>

JavaScript:

Explanation:

.then(res => res.json()): Converts the HTTP response into a JavaScript object.

.catch(): Handles any error such as no internet or wrong URL.

4. Use Case: POST Request Using fetch()

Example: Submit form data using POST method.

const formData = { name: "John Doe", email: "john@example.com" }; fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }) .then(res => res.json()) .then(data => console.log('Success:', data)) .catch(error => console.error('Error:', error));

💡 Explanation:

method: 'POST': Specifies the HTTP method.

headers: Tells the server you're sending JSON.

body: Converts the JavaScript object to JSON string.

5. 2: Display Posts Dynamically

Objective:

Use fetch() to retrieve posts and render them in HTML using a dynamic approach.

<button onclick="getPosts()">Load Posts</button> <div id="posts"></div>

6. Common Errors and How to Handle Them

Error Type

Cause

Solution

Network Error

No internet or bad URL

Use .catch() to catch it

Invalid JSON

Server returns bad format

Check response type

404 Not Found

URL incorrect

Validate the endpoint URL

Example of Handling 404:

fetch('https://example.com/data') .then(res => { if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } return res.json(); }) .catch(error => console.error('Caught an error:', error));

7. Research Insights

Key Expert Tips:

Async/Await is Preferred for Readability

— Sara Drasner (JS Expert)

“Use async/await syntax for cleaner and readable fetch logic.”

Error Handling Is Critical

— Kyle Simpson (Author of "You Don’t Know JS")

“Always anticipate what can go wrong, even with simple fetch requests.”

Async/Await Version:

async function fetchData() { try { const response = await fetch('https://jsonplaceholder.typicode.com/posts/1'); if (!response.ok) throw new Error('Network response was not ok'); const data = await response.json(); console.log(data); } catch (error) { console.error('Fetch error:', error); } } fetchData();

8. Exercises

Exercise 1:

Fetch and display a single user's data when a button is clicked.

Task: Use https://jsonplaceholder.typicode.com/users/1

Goal: single fetch + DOM rendering

Exercise 2:

Create a form to submit data using POST with fetch.

Task: Take name and message input, then submit to https://jsonplaceholder.typicode.com/posts

Goal: POST requests and working with forms

9. 3: Building a Mini Weather App

Objective:

Use a weather API to fetch data and display current weather of a user-input city.

HTML + JavaScript:

<input type="text" id="city" placeholder="Enter city"> <button onclick="getWeather()">Get Weather</button> <div id="weather"></div> <script> async function getWeather() { const city = document.getElementById('city').value; const apiKey = 'YOUR_API_KEY'; const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`; try { const res = await fetch(url); if (!res.ok) throw new Error('City not found'); const data = await res.json(); document.getElementById('weather').innerHTML = `Temperature: ${data.main.temp}°C<br>Weather: ${data.weather[0].description}`; } catch (error) { document.getElementById('weather').innerHTML = error.message; } } </script>

10. Summary

fetch() is a powerful tool to get and send data from/to servers.

Works with Promises and supports all HTTP methods.

Handling errors and parsing data is essential.

Async/await provides cleaner code.

Public APIs offer great practice.

Quiz

res.json() return.

handle a failed fetch call.

HTTP method is used by default in fetch.

advantages of using async/await with fetch().

A fetch call to POST data to an API.

online courses

Sunday, August 31, 2025

Javascript Module 59

Javascript Module 59

Friday, August 29, 2025

Javascript Module 58

Javascript Module 58

Wednesday, August 27, 2025

Javascript Module 57

Javascript Module 57

Javascript Module 78

Report Abuse

Labels