#promise.allsettled

[codewithnazam]

Javascript Promise all: You Didn't Know You Needed!

In JavaScript, Promise all is a method that takes an array of promises and returns a single promise. This new promise is fulfilled with an array of the fulfilled values of the original promises, in the same order as the promises passed to Promise.all. If any of the input promises is rejected, the whole Promise.all is rejected with the reason of the first rejected promise. "If you're new to the…

[transienturl]

Hrmmmm.

I have a piece of code that (simplified) takes an array of values, runs a fetch corresponding to each value, and does something with the results (in order). The naive way to do this runs all of the fetches in sequence, which is of course slow.

for (const value of someValues) { const result = await fetch(value); console.log(result); }

The slightly less naive way to do this (Promise.all) fires all of the fetches at the same time, which is fine if you have a small number, but not so much if you have a big number. Ideally you would want to do a specific configurable number of fetches at once.

Obviously this isn't hard to do if you write your code that way in advance. I was trying to think of a way to do a helper function that could be used to replace the naive way with a minimal change to the code, though.

In a way, I actually already had one of these (this gist needs more comments; the technique is quite cool imho but it's a bit of a fun puzzle to understand):

This is nice for medium-sized arrays where you're okay with waiting until all of the fetches to resolve before you do anything else with them. But for really large arrays, it's nice to be able to do stuff with the results incrementally. I had this idea:

const batchCallAsync = (inputValues, cb, batchSize) => { const results = []; const values = [...inputValues]; let waitForPreviousBatch = Promise.resolve(); while (values.length) { const resultBatch = values.splice(0, batchSize).map( (value) => new Promise((resolve) => { waitForPreviousBatch.finally(() => resolve(cb(value))); }) ); waitForPreviousBatch = Promise.allSettled(resultBatch); results.push(...resultBatch); } return results; };

This, when run, instantly generates an array of promises, but the promises execute fetches and resolve in batches. You can thus do e.g.

for await (const result of batchCallAsync(someValues, fetch, 5)) { console.log(result) }

and the log statements will come out in real time as the fetches occur. Neat. Could use some refactoring (and a performance improvement to match that gist), but whatever.

Problem, though: you can't cancel this. If you call this on an array of length 3500, you are getting 3500 fetches executed even if you break that for loop (unless you close node/your browser tab). That's not true of the original snippet.

I'm pretty sure it's possible to solve that, too? This seems like the ideal use case for an async generator function. Haven't bothered to write it, yet, but it should be quite simple in principle.

[hellowahab]

30 Must-Know Async Problems for JavaScript Interviews

1️⃣ Build a custom Promise from scratch.2️⃣ Create your own Promise.all implementation.3️⃣ Design a Promise.any that resolves to the first fulfilled promise.4️⃣ Develop a Promise.race to resolve based on the fastest result.5️⃣ Implement Promise.allSettled to handle multiple results—fulfilled or rejected.6️⃣ Add a finally method for promises that always runs, regardless of outcome.7️⃣ Convert…

[obscurejavascript]

Waiting For All Promises to Execute in JavaScript (Even if There Are Errors)

Promise.all takes an array of promises to run all at once and stops either when all promises are successful or when one promise is rejected. In a lot of cases this is what is wanted. Though sometimes all promises need to be waited for no matter what and the operations should happen in parallel. For example, to track all errors found so a unified error message can be generated. Here is what happens when using Promise.all:

// Simulated API Calls function api1() { return new Promise((resolve, reject) => { setTimeout(() => reject('Error 1'), 200); }); } function api2() { return new Promise((resolve, reject) => { setTimeout(() => resolve(['some', 'data']), 300); }); } function api3() { return new Promise((resolve, reject) => { setTimeout(() => reject('Error 2'), 400); }); } async function displayAllResults() { try { const results = await Promise.all([api1(), api2(), api3()]); console.log('results', results); // (never called) } catch (err) { console.log(err); // Error 1 } } displayAllResults();

Instead a function that only is fulfilled when all promises have run (Promise.allSettled) no matter what:

async function displayAllResults() { try { const results = await Promise.allSettled([api1(), api2(), api3()]); const errors = results.filter((result) => result.status === 'rejected'); console.log(errors.map((error) => error.reason)); // [ 'Error 1', 'Error 2' ] } catch (err) { console.info(err); // (never called) } } displayAllResults();

This function will soon be available in native JavaScript: https://github.com/tc39/proposal-promise-allSettled. Here is my implementation to demonstrate the above:

if (typeof Promise.allSettled !== 'function') { const alwaysResolveWrapper = function(promise) { return promise.then((value) => { return { status: 'fulfilled', value }; }, (err) => { return { status: 'rejected', reason: err }; }); } Promise.allSettled = function(promises) { return Promise.all(promises.map((promise) => { return alwaysResolveWrapper(promise); })); } }

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2019/allSettled.js

[vuejs2]

How to Use `Promise.allSettled()`: https://t.co/HoyW9JuQHn (How to use Promise.allSettled to perform parallel async operations and collect the promises statuses into an array.)

[javascriptw3schools]

`Promise.all` vs `Promise.allSettled`: https://t.co/WVW0V0uw15

[anthrfrmt]

Promise.allSettled https://ift.tt/30ml7Ty

[t-baba]

Node.js vs Deno: What You Need to Know

Since its announcement, Deno has generated quite a lot of interest within the JavaScript community. As a JavaScript runtime designed by the creator of Node, you might expect there to be be a lot of similarities between the two projects, and there are. However, there are also important differences, meaning you can’t just substitute one for the other.

This article will take a look at Deno in relation to its “older cousin” to help understand what they have in common, and what sets them apart. (If you want to get the skinny on Deno first, check out our recent introduction.)

Language Support

Both projects are JavaScript runtimes, allowing JavaScript code to be executed on a computer outside of a web browser. Let’s look at how they stack up in terms of language support.

Node.js

The current LTS release of Node (v12.18.1 as of writing) supports modern JavaScript syntax and features. It also supports about 75% of the ES2020 spec. ECMAScript modules are also supported, but are currently only classed as experimental: you need to use the .mjs file extension, or add the property "type": "module" to your project’s package.json file.

In order to run TypeScript (or any other language) on Node, the code needs to be compiled to JavaScript that the V8 engine can execute. There are several different ways to do this, with different pros and cons, so getting up and running means having to choose one of these and follow the necessary setup process.

Deno

I was unable to find any mention of the JavaScript spec supported by Deno, but as it also uses V8 under the hood I would assume a similar level of support as in Node. My own tests show that Deno supports ES2020 features like Promise.allSettled() and the globalThis keyword. ECMAScript modules are the default, with CommonJS modules not supported unless you use the Node compatibility library (more about this later).

TypeScript is supported as a first-class language in Deno, meaning that it works out-of-the-box: no installing additional tools to transpile to JavaScript first. Of course, the V8 engine doesn’t support TypeScript natively, so Deno is still transpiling the code under the hood, but this is all seamless and transparent to you as a developer.

I also couldn’t find mention of which version of TypeScript Deno v1.0.1 uses, but it supports optional chaining and nullish coalescing (but not private class fields) which would peg it as TS 3.7.

APIs

Deno and Node both expose their own APIs to developers, allowing us to write programs that can actually do useful things like read and write files, and send and receive network requests.

Node.js

When Node was first released, there was no built-in support for Promises. As a result of this, most of the APIs for asynchronous operations were written to take an error-first callback:

const fs = require('fs'); fs.readFile('readme.txt', (err, data) => { if (err) { // Handle the error } // Otherwise handle the data });

Even though Node developers now have access to Promises and the async/await syntax, the APIs still expect callbacks in order to maintain backwards compatibility.

Deno

Deno’s API has been designed to take advantage of modern JavaScript features. All the asynchronous methods return Promises. Deno also supports top level await, meaning you can use await in your main script without having to wrap it in an async function.

try { const data = await Deno.readFile('readme.txt'); // Handle the data } catch (e) { // Handle the error }

The development team also made the decision to use web standards where possible, which means they’ve implemented browser APIs where it’s practical to do so. Deno provides a global window object, and APIs such as addEventListener and fetch. Having access to fetch is particularly nice, as with Node you’d have to polyfill this or use a third-party library.

The compatibility module

Deno provides a compatibility layer with the aim of allowing you to reuse existing Node packages. It’s not yet complete, but it does currently support loading CommonJS modules via require(), among other things.

Package Management

Package management is one area where Deno represents a radical departure from Node’s way of doing things. As it’s still early days for Deno, it remains to be seen if its approach will prove to be advantageous.

Node.js

As you might be aware, Node comes with its own package manager called npm, which is used to install and manage third-party packages. npm is mainly used with the online npm registry, where most of the available third-party packages are listed.

When you use npm to install a package into your project, a package.json file is used to specify the package name and acceptable version range. The package itself (plus any packages it depends on) are then downloaded into a node_modules folder inside your project.

Deno

Deno does away with the need for a package manager altogether. Instead, packages are linked to directly via a URL:

import { Response } from "https://deno.land/std@0.53.0/http/server.ts";

On the first run of your code, Deno fetches and compiles all the dependencies. They are then cached on the file system, separately from your project, so subsequent runs are much faster.

Similar to npm’s package-lock.json file, Deno allows you to specify a lock file that will be used to ensure that only dependencies that match the exact version you originally imported will be used

Continue reading Node.js vs Deno: What You Need to Know on SitePoint.

by Nilson Jacques via SitePoint https://ift.tt/2BXUBGZ

[codewithnazam]

Mastering Asynchronous with JavaScript Promise allSettled()

Introduction to JavaScript Promises What are Promises? When to Use Promises? Benefits of Promises Creating Promises with the Promise Constructor Understanding the allSettled() Method Functionality of allSettled() Differences from Promise.all() When to Use allSettled() Benefits of Using allSettled() Handling Multiple Asynchronous Operations Simultaneously Dealing with Mixed Fulfilled and…

[mbaljeetsingh]

10 New JavaScript Features in ES2020 That You Should Know

Good news! ES2020 features are now finalised! This means now we've a full view of the changes happening in ES2020 - a new, rather an improved specification of JavaScript. Let's see what changes we have for ECMAScript 2020 edition.

Do you wish to learn JavaScript and other programming languages in a completely new way? Head on to a new platform for developers I'm working on to try it out today! Let's get started with the features now!

#1: BigInt

BigInt is one of the most awaited  features in JavaScript which is coming finally and would actually allow developers to have much bigger integer representation in  JavaScript for data processing for data  handling. At the moment the maximum  number you can store as an integer in  JavaScript is pow(2, 53) - 1  but BigInt actually allows you to go even beyond that.  

However, you need to have a n appended at the very end of the number as you can see. This n denotes that this is a BigInt and should be treated specially by the JavaScript engine (by the v8 engine or whatever engine it is using).

The improvement is not compatible with the older number system because the traditional number system is IEEE754 which just cannot support numbers of this size.

#2: Dynamic import

Dynamic imports in JavaScript would natively provide you the option to import JS files dynamically as modules in your application (Just like how you do it at the moment with webpack and babel)

This would help you to ship on-demand-request code, better known as code splitting without any overhead of webpack or other module bundlers, or you can conditionally load code in an if-else block too. The good thing is you actually import a module, hence, it never pollutes the global namespace.

#3: Nullish Coalescing

Nullish coalescing adds the ability to truly check nullish values instead of falsey values. What is the difference between nullish and falsey values you might ask?

In JavaScript, a lot of values are falsey, like: empty strings, the number 0, undefined, null, false, NaN, etc. However, a lot of times, you want to check if a variable is nullish, i.e. is either undefined or null, i.e. it's okay for a variable to have an empty string, or even false value.

In that case, you'll use the new nullish coalescing operator -> ??

You can clearly see how the OR operator always return a truthy value, whereas the nullish operator returns a non-nulllish value.

#4: Optional Chaining

Optional chaining syntax allows you to access deeply nested object properties without worrying if the property exists or not. If it exists, great! If not, you'll get undefined returned. This not only works on object properties, but also on function calls and arrays. Super convenient! Here's an example:

#5: Promise.allSettled

Promise.allSettled method would accept an array of Promises and would only resolve when all of them are settled - either resolved or rejected. This was not available natively earlier, even though some close implementations like race and all were available. This brings "just run all promises - I don't care about the results" natively to JavaScript.

#6: String#matchAll

matchAll is a new method added to String prototype which is related to Regular Expressions. This returns an iterator which returns you all matched groups one after another. Let's have a look at quick example:

#7: globalThis

If you wrote a cross-platform JS code which could run on Node as well as in browser environment as well as inside web-workers, you'll have a hard time getting hold of the global object. This is because it is window for browsers, global for Node and self for web workers. If there are more runtimes, they'll be different for them. So you'll have to have your own implementation of detecting runtime and then using the correct global, until now.

ES2020 brings globalThis which always refers to the global object, no matter where you are executing your code:

#8: Module Namespace Exports

In JavaScript modules, it was already possible to use the following syntax:

import * as utils from './utils.mjs'

However, no symmetric export syntax existed… until now:

export * as utils from './utils.mjs'

This is equivalent to the following:

import * as utils from './utils.mjs' export { utils }

#9: Well defined for-in order

The ECMA specification did not specify in which order the for (x in y)  should run. Even though browsers implemented a consistent order on their own till now, this has now been officially standardized in ES2020.

The import.meta object is created by the ECMAScript implementation, with a null prototype.

Consider a module module.js

<script type="module" src="module.js"></script>

you can access meta information about the module using the import.meta object.

console.log(import.meta); // { url: "file:///home/user/module.js" }

It returns an object with a url property indicating the base URL of the module. This will either be the URL from which the script was obtained, for external scripts, or the document base URL of the containing document, for inline scripts.

Conclusion

I love the consistency and speed with which the JavaScript community has evolved and is evolving. It is amazing and truly wonderful to see how JavaScript came from a language which was boo-ed on, 10 years go, to one of the strongest, most flexible and versatile language of all time today. What's your favorite feature of ES2020? Tell me about it by tweeting and connecting with me on Twitter and Instagram!

This is a written blog post of my video which is on the same topic, and would mean a world to me if you could show it some love!

via freeCodeCamp.org https://ift.tt/2JD0JV2

[kjunichi]

Promise.allSettled と Promise.any | blog.jxck.io [はてなブックマーク]

Promise.allSettled と Promise.any | blog.jxck.io

Intro Promise.allSettled() と Promise.any() の仕様策定が進んでいる。 両者は近いレイヤの仕様では有るが、作業の進捗には差がある。 Promise.allSettled は Stage 4 であり、 Chrome や Safari TP には実装もされている Promise.any は Stage 2 であり、実装はまだない ここでは、これらがあると何が嬉しいのかを Pr...

from kjw_junichiのはてなブックマーク https://ift.tt/2NeDGTE

[webdesigntutorials]

Promise.allSettled

The Promise object has many useful functions like all, resolve, reject, and race — stuff we use all the time. One function that many don’t know about is Promise.allSettled, a function that fires when all promises in an array are settled, regardless of whether any of the promises are resolved or rejected.

Promise.all is great but then isn’t called if a project is rejected:

Promise.all([ Promise.resolve(1), Promise.resolve(true), Promise.reject("Boooooo"), ]) .then(_ => console.log("Then!")) .catch(e => console.

Check Full Content Here […]

from Proven Ways https://ift.tt/2XoAJ77

[topicprinter]

Article URL: https://blog.jonlu.ca/posts/promises?ref=hnm18

Comments URL: https://news.ycombinator.com/item?id=23223881

Points: 5

# Comments: 1

[vuejs2]

`Promise.all` vs `Promise.allSettled`: https://t.co/WVW0V0uw15

[suzanneshannon]

5 Awesome JavaScript Promise Tricks

The Promise API changed the game in JavaScript. We went from abusing setTimeouts and settling for synchronous operations to doing everything possible to leverage this new async API. Let’s check out a handful of awesome Promise API tricks!

Cancel a fetch Request

One problem we instantly complained about with promises was not being able to cancel them. A simple promiseInstance.cancel() would have been excellent but never came. Instead we were given an API that was way more complicated:

const controller = new AbortController(); const { signal } = controller; fetch("http://localhost:8000", { signal }).then(response => { console.log(`Request 1 is complete!`); }).catch(e => { console.warn(`Fetch 1 error: ${e.message}`); }); // Abort request controller.abort();

The magic here is providing the signal with each fetch request. In the JavaScript world, we inherit difficult APIs and do wonders to abstract them, and thus we’ll find a way to better abstract this API.

waitForTime & waitForever

Waiting for a duration is useful in loads of production and testing situations — it’s never ideal but always helpful. I’ve used two awesome functions to make my life btter:

/* Wait for milliseconds */ function waitForTime(ms) { return new Promise(r => setTimeout(r, ms)); } /* Usage */ await waitForTime(200); /* Wait Forever */ function waitForever() { return new Promise(r => {}); } // Usage: await waitForever();

Don’t wait for perfect situations, wait for the time you need.

Async Array Functions

Array functions like forEach, map, and other functions are used frequently without the need for them to be synchronous. We don’t think about it there’s a fair amount of times we can go async with our operations.

const promises = [1, 2, 3].forEach(async (num) => { console.log(num); }); await promises;

The difference in caring between async and sync is Promise.allSettled. Go async when you can!

then on Objects

Did you know that you can arbitrarily add a then method on objects to have them treated as a Promise?

j = { then: resolve => fetch("/").then(resolve) } j.then(res => console.log(res)); // Response {type: "basic", url: "https://davidwalsh.name/", redirected: false, status: 200, ok: true, …} // ... or an await... const response = await j; // Response {type: "basic", url: "https://davidwalsh.name/", redirected: false, status: 200, ok: true, …}

Now you know! An excellent trick most don’t know about!

Detect an Async Function

Not something you would need to do often but this post is about tricks, right? If you want to detect an asynchronous function, you always can:

async function myFunction() { } const isAsync = myFunction.constructor.name === "AsyncFunction";

JavaScript Promises are something we every day but a broader look at them allows us to innovate! Have any Promise tricks of your own? Please share!

The post 5 Awesome JavaScript Promise Tricks appeared first on David Walsh Blog.

5 Awesome JavaScript Promise Tricks published first on https://deskbysnafu.tumblr.com/

[gozealouscloudcollection]

ES2020特性集塵埃落定

TC39委員會於近期批准了ECMAScript 2020（即ES2020）候選提案，即經審定最終添加到JavaScript語言中的特性集。 ES2020候選提案是今年六月提交ECMA大會（General Assembly）的審批匯總，其中的大部分新特性已在瀏覽器中得到實現，並已可被Babel JavaScript解析器轉碼（transpile）。

在ES2020規範中，為String對象引入了新的matchAll方法，該方法根據一個全局正則表達式生成所有匹配對象的一個迭代器；在語法上支持import()，使用動態描述符異步導入模塊；支持任意精度整型的BigInt類型；Promise新的組合器Promise.allSettled，它不會造成短路；提供訪問全局this值的通用操作方式globalThis；模塊內使用的export * as …

from ES2020特性集塵埃落定 via KKNEWS