Skip to main content
100%

legacy pattern by me for async fetching multiple urls

✓ Published0🌍 Public
Aanemochore
Last edited Dec 19, 2019
Created on Dec 19, 2019

This example demonstrates a sequential asynchronous fetching pattern for multiple URLs, showing how to collect and process text responses before triggering a final completion callback. The code uses the raw `XMLHttpRequest` API with an `onreadystatechange` handler to check `readyState` and `status`, then chains the next request by calling `asyncFetch` from within `fetchSuccess`. Each response is truncated to 256 characters and pushed into a global `result` array, with the sequence ending when the URL list is exhausted, as indicated by the `loadEnd` function. The data source is an array of same-origin page URLs, and the rendering is limited to console output of the accumulated results.

AI-generated description

Similar vizzes

Loading thumbnail…

Early Stage Fetching

This example demonstrates early-stage data fetching with the browser’s native Fetch API, loading a CSV file of CSS named colors from a GitHub gist. It shows two asynchronous techniques: a standard promise chain using `fetch().then()` and `response.text()`, and an `async`/`await` pattern within a custom `myFetcher` function. Both approaches log the fetched text to the console, highlighting the sequence of network requests before any page content renders. The code uses no external libraries, relying solely on vanilla JavaScript and the Fetch API.

RRichard Burd
64% match
Loading thumbnail…

fetch data asynchrously

This example demonstrates how to retrieve data from a remote URL asynchronously using JavaScript. It fetches a CSV file containing CSS named colors from a GitHub gist via the `fetch` API, converts the response to text with `response.text()`, and logs the raw content to the browser console. The code defines a reusable `fetchText` function that wraps the asynchronous fetch and text extraction in a promise chain with `.then()`. The HTML file is minimal, relying entirely on the external `index.js` script for functionality, and no visualization or rendering occurs beyond the console output.

AAbhay kumar singh
64% match
Loading thumbnail…

Data Fetcher (Asnyc/Await Promise.Then)

This example demonstrates two techniques for fetching remote data in JavaScript and logging the results to the console. The page uses the Fetch API to retrieve a CSV file of CSS named colors from a GitHub gist, with the data returned as raw text. The code contrasts the use of `async`/`await` syntax within an `async function` against the older `Promise` chaining approach via `.then()` methods. Both methods successfully retrieve the same resource, while a plain `console.log` statement prints a separate message to show the order of execution. The example is implemented as a minimal HTML page inside a React project scaffold.

Jjunxiangyao
63% match
Loading thumbnail…

Gist 4ff85e89516594d9399c15b3c436878f

This example demonstrates JavaScript Promise patterns for asynchronous server communication, showing fetch(), .then(), .catch(), Promise.all/race, custom Promise construction, and async/await syntax. The code samples use the browser's built-in fetch() API against document.URL.toString() to simulate server checks, with console.log output for results and error handling. It also includes a setTimeout-based delay Promise example to illustrate timing control. The gist serves as educational reference material, contrasting Promise chains, custom Promise creation, and sugar-syntax async functions.

MMistyBlunch
60% match
Loading thumbnail…

Loading data with fetch

This example demonstrates how to load and read external data using the browser’s native Fetch API within a plain HTML page. It defines an asynchronous function, `fetchText`, that fetches a URL and returns the response as text. The code then applies this function to a CSV file containing named CSS colors from a GitHub gist, and logs the resulting text to the console. The example is minimal, focusing solely on the data-loading step with no visualization or rendering yet.

MMark Hanly
60% match
Loading thumbnail…

Fetching data

This example demonstrates asynchronous data fetching in the browser, retrieving a CSV file of CSS named colors from a GitHub gist and logging its contents to the console. It uses the Fetch API’s `fetch()` method and the response object’s `text()` method within an async/await function, followed by a `.then()` promise chain to handle the resolved text. The code shows a minimal setup with no visual output, focusing purely on the network request and text extraction workflow.

LLove Wessman
60% match
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API and async/await syntax. The code fetches a dataset of CSS named colors from a GitHub gist and logs the raw text response to the browser console. It illustrates the modern promise-based approach for handling asynchronous data loading, with a commented-out alternative showing the older fetch-with-nested-then pattern. The visualization itself is minimal, focusing purely on the data retrieval and parsing workflow rather than any graphical output.

Ssixsoxsix
60% match
Loading thumbnail…

fetching data

This example shows a bare-bones HTML page that fetches data from a remote URL. It demonstrates the basic Fetch API workflow in JavaScript, where a `fetch()` call is made to a GitHub Gist URL and a promise is created to handle the response. The page includes a static "Hello HTML!" message and sets up the foundation for asynchronous data loading, though the response handling is incomplete. The example uses plain HTML, CSS for styling, and JavaScript's built-in `fetch()` function, with no external libraries or visualization components yet.

Sshre1310
60% match