Last active
March 31, 2021 19:34
-
-
Save deanrad/82153ab98d63b0b7a4e9b002c04da240 to your computer and use it in GitHub Desktop.
JS BinOboeJS incremental loading// source https://jsbin.com/riyolox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="OboeJS incremental loading"> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<script src="https://unpkg.com/oboe@2.1.4/dist/oboe-browser.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script> | |
</head> | |
<body> | |
<script id="jsbin-javascript"> | |
// Kick off 2 async requests in parallel and | |
// compare them as to when they provide usable data | |
// We use a URL that provides results from a github repo query. | |
// Way 1: We get actionable information the soonest | |
oboe('https://untitled-yd6fw62bsoo0.runkit.sh/') | |
// Either one at a time | |
// .node('items[*]', item => { | |
// console.log("1. Got repo: " + item.full_name) | |
// }) | |
// Or as an ever-growing array | |
.node('$items[*]', items => { | |
let c = items.length | |
let text = items.map(i => i.full_name).join("|") | |
console.log("1. Received: " + c + " repos\n" + text ) | |
}) | |
.done(() => console.log('1. [Antares se cumplio]')) | |
// Way 2: We must wait until we have all of them to act | |
axios.request({ | |
url: 'https://untitled-yd6fw62bsoo0.runkit.sh/', | |
onDownloadProgress() { | |
console.log("2. Data chunk") | |
} | |
}).then(response => { | |
let c = response.data.items.length | |
let text = response.data.items.map(i => i.full_name).join("|") | |
console.log("2. Received: " + c + " repos\n" + text ) | |
}) | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">// Kick off 2 async requests in parallel and | |
// compare them as to when they provide usable data | |
// We use a URL that provides results from a github repo query. | |
let oboeCount=1 | |
// This way, we get actionable information the soonest | |
oboe('https://untitled-yd6fw62bsoo0.runkit.sh/') | |
// Either one at a time | |
// .node('items[*]', item => { | |
// console.log("1. Got repo: " + item.full_name) | |
// }) | |
// Or as an ever-growing array | |
.node('$items[*]', items => { | |
let c = items.length | |
let text = items.map(i => i.full_name).join("|") | |
console.log("1. Received: " + c + " repos\n" + text ) | |
}) | |
.done(() => console.log('1. [Antares se cumplio]')) | |
// This way we must wait until the end once we have all of them. | |
axios.request({ | |
url: 'https://untitled-yd6fw62bsoo0.runkit.sh/', | |
onDownloadProgress() { | |
console.log("2. Data chunk") | |
} | |
}).then(response => { | |
let c = response.data.items.length | |
let text = response.data.items.map(i => i.full_name).join("|") | |
console.log("2. Received: " + c + " repos\n" + text ) | |
})</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Kick off 2 async requests in parallel and | |
// compare them as to when they provide usable data | |
// We use a URL that provides results from a github repo query. | |
let oboeCount=1 | |
// This way, we get actionable information the soonest | |
oboe('https://untitled-yd6fw62bsoo0.runkit.sh/') | |
// Either one at a time | |
// .node('items[*]', item => { | |
// console.log("1. Got repo: " + item.full_name) | |
// }) | |
// Or as an ever-growing array | |
.node('$items[*]', items => { | |
let c = items.length | |
let text = items.map(i => i.full_name).join("|") | |
console.log("1. Received: " + c + " repos\n" + text ) | |
}) | |
.done(() => console.log('1. [Antares se cumplio]')) | |
// This way we must wait until the end once we have all of them. | |
axios.request({ | |
url: 'https://untitled-yd6fw62bsoo0.runkit.sh/', | |
onDownloadProgress() { | |
console.log("2. Data chunk") | |
} | |
}).then(response => { | |
let c = response.data.items.length | |
let text = response.data.items.map(i => i.full_name).join("|") | |
console.log("2. Received: " + c + " repos\n" + text ) | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment