There are two places I check whenever I have questions such as this:

The **Can I Use** website: http://caniuse.com/#search=await

And **Node Green**: http://node.green/#async-functions

Typically an answer is encouraged to include the relevant information to avoid link rot. But ironically this answer has exactly the opposite problem: this answer will rot (the information below will become invalid) long before the links above. So always check caniuse and node.green first:

From caniuse.com as of April 2019 :

- **IE** *: NOT SUPPORTED (most used version = 11)
- **Edge**: From version 15 (most used version = 17)
- **Firefox**: From version 52 (most used version = 65)
- **Chrome**: From version 55 (most used version = 72)
- **Safari**: From version 10.1 (most used version = 12)
- **Opera**: From version 42 (most used version = 58)
- **iOS Safari**: From version 10.3 (most used version = 12.1)
- **Opera Mini** *: NOT SUPPORTED
- **Android Browser** *: From 5 (most used version = 4.4)
- **Chrome for Android**: From version 55 (most used version = 71)

From node.green as of April 2019

- Node.js: From version 8.0.0

So depending on what you think is acceptable it is either safe or not safe. Note the following:

- This question was originally asked on 2017, and we have come a long way so async/await is much more safe to use now.
- By 2019, most mobile devices already support async/await.
- Node 8 is released on May 2017 so it should be safe to use async/await on Node.js unless your Node.js servers are very outdated.

TS documentation says:

&gt; the **never** type represents the type of values that never occur. Variables also acquire the type **never** when narrowed by any type guards that can never be true.

I didn&#39;t understand its usage, can anybody give me an answer with some examples.

Use of never keyword in typescript

My problem is that I want the flexbox with variable range width, and all works well, but not on the last row. I want the same dimension for all children even where the row is not full of children (the last row).

&lt;!-- language: lang-css --&gt;

    #products-list {
        position:relative;
        display: flex;
        flex-flow: row wrap;
        width:100%;
    }

    #products-list .product {
        min-width:150px;
        max-width:250px;
        margin:10px 10px 20px 10px;
    	flex:1;
    }

I created [a dynamic situation in **jsFiddle**][1]

My flex divs can shrink until 150px and grow up to 250px, but all must be with the same size (and obviously I want a CSS solution, with JS I know the way).


  [1]: https://jsfiddle.net/StepBaro/14ncacw6/

Targeting flex items on the last or specific row

Is it safe to use async-await in Javascript instead of
generators-promises now, knowing that the syntax has not made yet and
will be coming with the release of ES8?

What browsers can I count on it being available, and how common are the browsers where this syntax is not available?  By Safe I mean without some transpilers like babel?

Is it safe to use async/await now?

<p>Is it safe to use async-await in Javascript instead of
generators-promises now, knowing that the syntax has not made yet and
will be coming with the release of ES8?</p>
<p>What browsers can I count on it being available, and how common are the browsers where this syntax is not available?  By Safe I mean without some transpilers like babel?</p>


I&#39;m trying to implement the Facebook&#39;s logout functionality in my project. Login works just fine. But I&#39;m facing the getting the following message in JavaScript console with the logout code.

&gt; [Violation] Long running JavaScript task took 318ms session.php:51  1
&gt; sdk.js:135 
&gt; 
&gt; [Violation] Handler took 83ms of runtime (50ms allowed)

I&#39;ve tried to search for other similar threads and those solutions didn&#39;t work out for me. I tried removing parts of my code and see which part is giving problem. Its quite clear that its getting the error due to Facebook&#39;s JS SDK as seen in the message. I&#39;ve also disabled all of my Chrome extensions.

The code **works fine in Firefox** but **not in Chrome, nor in Opera**. Is there any method for me to extend this timeout duration? Or any other method to fix this issue in chrome. Here is my code for logout.

    &lt;?php
    	session_start();
    	//echo $_SESSION[&quot;current_user&quot;];
    	//echo $_COOKIE[&quot;current_user&quot;];
    	session_destroy();
    	unset($_COOKIE[&quot;current_user&quot;]);
    	setcookie(&quot;current_user&quot;,&quot;&quot;,time() -3600, &quot;/&quot;,&quot;&quot;, 0);
    	//header(&quot;location: login.php&quot;);
    ?&gt;

    &lt;!doctype html&gt;

    &lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body&gt;
    
    &lt;script&gt;
    
    	// Default settings
    	window.fbAsyncInit = function() {
    		FB.init({
    			appId      : &#39;&lt;app-id&gt;&#39;,
    			cookie     : true,
    			xfbml      : true,
    			version    : &#39;v2.8&#39;
    		});
    		FB.AppEvents.logPageView();   
    	};
    
    	(function(d, s, id){
    		var js, fjs = d.getElementsByTagName(s)[0];
    		if (d.getElementById(id)) {return;}
    		js = d.createElement(s); js.id = id;
    		js.src = &quot;//connect.facebook.net/en_US/sdk.js&quot;;
    		fjs.parentNode.insertBefore(js, fjs);
    	}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
    
    	window.onload = function(){
    		logout();
    	}
    	function logout(){
    		console.log(&quot;1&quot;);
    		FB.getLoginStatus(function(response) {
    		if (response.status === &#39;connected&#39;) {
    			FB.logout();
    			console.log(&quot;2&quot;);
    			window.location=&quot;login.php&quot;;
    			console.log(&quot;3&quot;);
    		}
    		else{
    			console.log(&quot;4&quot;);
    			window.location=&quot;login.php&quot;;
    			console.log(&quot;5&quot;);
    		}
    		});
    	}
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;

For obvious reasons I&#39;ve removed the App-Id from the code. Any help is appreciated. :)

Chrome violation : [Violation] Handler took 83ms of runtime

I am experimenting with the `await` keyword in Node.js. I have this test script:

    &quot;use strict&quot;;
    function x() {
      return new Promise(function(resolve, reject) {
        setTimeout(function() {
          resolve({a:42});
        },100);
      });
    }
    await x();

But when I run it in node I get

    await x();
          ^
    SyntaxError: Unexpected identifier

whether I run it with `node` or `node --harmony-async-await` or in the Node.js &#39;repl&#39; on my Mac with Node.js 7.5 or Node.js 8 (nightly build).

Oddly, the same code works in the Runkit JavaScript notebook environment: https://runkit.com/glynnbird/58a2eb23aad2bb0014ea614b

What am I doing wrong?


&#39;await Unexpected identifier&#39; on Node.js 7.5

I am trying to use a plugin called &quot;Simplebar&quot; found on GitHub, [GitHub SimpleBar][1] but after downloading the scripts and looking at the simple.js script, it looks like it has an error &quot;SyntaxError: import declarations may only appear at top level of a module&quot;

At the top of the simplebar.js file there are some import lines of code:

    import scrollbarWidth from &#39;scrollbarwidth&#39;
    import debounce from &#39;lodash.debounce&#39;

    import &#39;./simplebar.css&#39;

If I look in my browser debugger I see an error: &quot;SyntaxError: import declarations may only appear at top level of a module&quot;.

Has anyone tried to us this plugin.

Many thanks in advance for your time.


  [1]: https://github.com/Grsmto/simplebar

SyntaxError: import declarations may only appear at top level of a module

I can scroll to 200px using the following


    btn.addEventListener(&quot;click&quot;, function(){
        window.scrollTo(0,200);
    })

But I want a smooth scroll effect. How do I do this?

How to window.scrollTo() with a smooth effect

I&#39;m using [react-router v4](https://reacttraining.com/react-router/) and [material-ui](http://www.material-ui.com/) in my React app. I was wondering how to change the URL once there is a click on a `GridTile` within [GridList](http://www.material-ui.com/#/components/grid-list).

My initial idea was to use a handler for `onTouchTap`. However, the only way I can see to redirect is by using the components `Redirect` or `Link`. How could I change the URL without rendering those two components?

I&#39;ve tried `this.context.router.push(&#39;/foo&#39;)` but it doesn&#39;t seem to work.

Changing the URL in react-router v4 without using Redirect or Link

I am using React and Typescript. I have a react component that acts as a wrapper, and I wish to copy its properties to its children. I am following React&#39;s guide to using clone element: https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement. But when using using `React.cloneElement` I get the following error from Typescript:

    Argument of type &#39;ReactChild&#39; is not assignable to parameter of type &#39;ReactElement&lt;any&gt;&#39;.at line 27 col 39
      Type &#39;string&#39; is not assignable to type &#39;ReactElement&lt;any&gt;&#39;.

**How can I assign the correct typing&#39;s to react.cloneElement?**

Here is an example that replicates the error above:

    import * as React from &#39;react&#39;;
    
    interface AnimationProperties {
        width: number;
        height: number;
    }
    
    /**
     * the svg html element which serves as a wrapper for the entire animation
     */
    export class Animation extends React.Component&lt;AnimationProperties, undefined&gt;{
    
        /**
         * render all children with properties from parent
         *
         * @return {React.ReactNode} react children
         */
        renderChildren(): React.ReactNode {
            return React.Children.map(this.props.children, (child) =&gt; {
                return React.cloneElement(child, { // &lt;-- line that is causing error
                    width: this.props.width,
                    height: this.props.height
                });
            });
        }
    
        /**
         * render method for react component
         */
        render() {
            return React.createElement(&#39;svg&#39;, {
                width: this.props.width,
                height: this.props.height
            }, this.renderChildren());
        }
    }




How to assign the correct typing to React.cloneElement when giving properties to children?

I&#39;m developing a website with webpack. When I have a code like this:

    import $ from &#39;jquery&#39;;
    function foo() {};
    module.exports = foo;

I got the error `Uncaught TypeError: Cannot assign to read only property &#39;exports&#39; of object &#39;#&lt;Object&gt;&#39;`.

Turns out that changing `import $ from &#39;jquery&#39;` to `var $ = require(&#39;jquery&#39;)` don&#39;t cause any errors.

**Why import with module.exports causes this error? Is anything wrong in using require instead?**

webpack: import + module.exports in the same module caused error

What exactly is the difference between the two? I&#39;ve seen people use:

    function foo () {
      ...
    }
    
    export default foo;

And I&#39;ve seen:

    function bar () {
      ...
    }
    
    export bar;

Also, why would you use the one over the other?

Difference between &#39;export&#39; and &#39;export default&#39; in JavaScript?

What&#39;s the difference between:

    switch (expression) {
        case:
          somethings;
          break;
    }

and

    switch (expression) {
        case: {
          somethings;
          break;
        }
    }

At first I thought that I could return an object literal like so, but it turns out it&#39;s a syntax error. What&#39;s the difference actually?

Example from another question:
https://stackoverflow.com/questions/42475118/how-to-pass-switch-statement-as-function-argument-in-javascript-es6/42475344#42475344

What do the curly braces do in switch statement after case in es6?

In my component below, the input field loses focus after typing a character. While using Chrome&#39;s Inspector, it looks like the whole form is being re-rendered instead of just the value attribute of the input field when typing.

I get no errors from either eslint nor Chrome Inspector.

Submitting the form itself works as does the actual input field when it is located either in the render&#39;s return or while being imported as a separate component but not in how I have it coded below.

Why is this so?

**Main Page Component**

    import React, { Component, PropTypes } from &#39;react&#39;;
    import { connect } from &#39;react-redux&#39;;
    import { bindActionCreators } from &#39;redux&#39;;
    import * as actionPost from &#39;../redux/action/actionPost&#39;;
    import InputText from &#39;./form/InputText&#39;;
    import InputSubmit from &#39;./form/InputSubmit&#39;;
    
    class _PostSingle extends Component {
        constructor(props, context) {
            super(props, context);
            this.state = {
                post: {
                    title: &#39;&#39;,
                },
            };
            this.onChange = this.onChange.bind(this);
            this.onSubmit = this.onSubmit.bind(this);
        }
        onChange(event) {
            this.setState({
                post: {
                    title: event.target.value,
                },
            });
        }
        onSubmit(event) {
            event.preventDefault();
            this.props.actions.postCreate(this.state.post);
            this.setState({
                post: {
                    title: &#39;&#39;,
                },
            });
        }
        render() {
            const onChange = this.onChange;
            const onSubmit = this.onSubmit;
            const valueTitle = this.state.post.title;
            const FormPostSingle = () =&gt; (
                &lt;form onSubmit={onSubmit}&gt;
                    &lt;InputText name=&quot;title&quot; label=&quot;Title&quot; placeholder=&quot;Enter a title&quot; onChange={onChange} value={valueTitle} /&gt;
                    &lt;InputSubmit name=&quot;Save&quot; /&gt;
                &lt;/form&gt;
            );
            return (
                &lt;main id=&quot;main&quot; role=&quot;main&quot;&gt;
                    &lt;div className=&quot;container-fluid&quot;&gt;
                        &lt;FormPostSingle /&gt;
                    &lt;/div&gt;
                &lt;/main&gt;
            );
        }
    }
    
    _PostSingle.propTypes = {
        actions: PropTypes.objectOf(PropTypes.func).isRequired,
    };
    
    function mapStateToProps(state) {
        return {
            posts: state.posts,
        };
    }
    
    function mapDispatchToProps(dispatch) {
        return {
            actions: bindActionCreators(actionPost, dispatch),
        };
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(_PostSingle);

**Text Input Component**

    import React, { PropTypes } from &#39;react&#39;;
    
    const InputText = ({ name, label, placeholder, onChange, value, error }) =&gt; {
        const fieldClass = &#39;form-control input-lg&#39;;
        let wrapperClass = &#39;form-group&#39;;
        if (error &amp;&amp; error.length &gt; 0) {
            wrapperClass += &#39; has-error&#39;;
        }
        return (
            &lt;div className={wrapperClass}&gt;
                &lt;label htmlFor={name} className=&quot;sr-only&quot;&gt;{label}&lt;/label&gt;
                &lt;input type=&quot;text&quot; id={name} name={name} placeholder={placeholder} onChange={onChange} value={value} className={fieldClass} /&gt;
                {error &amp;&amp;
                    &lt;div className=&quot;alert alert-danger&quot;&gt;{error}&lt;/div&gt;
                }
            &lt;/div&gt;
        );
    };
    
    InputText.propTypes = {
        name: PropTypes.string.isRequired,
        label: PropTypes.string.isRequired,
        placeholder: PropTypes.string.isRequired,
        onChange: PropTypes.func.isRequired,
        value: PropTypes.string,
        error: PropTypes.string,
    };
    
    InputText.defaultProps = {
        value: null,
        error: null,
    };
    
    export default InputText;

**Submit Button Component**

    import React, { PropTypes } from &#39;react&#39;;
    
    const InputSubmit = ({ name }) =&gt; {
        const fieldClass = &#39;btn btn-primary btn-lg&#39;;
        return (
            &lt;input type=&quot;submit&quot; value={name} className={fieldClass} /&gt;
        );
    };
    
    InputSubmit.propTypes = {
        name: PropTypes.string,
    };
    
    InputSubmit.defaultProps = {
        name: &#39;Submit&#39;,
    };
    
    export default InputSubmit;



In React ES6, why does the input field lose focus after typing a character?

[`asyncio.gather`][1] and [`asyncio.wait`][2] seem to have similar uses: I have a bunch of async things that I want to execute/wait for (not necessarily waiting for one to finish before the next one starts). They use a different syntax, and differ in some details, but it seems very un-pythonic to me to have 2 functions that have such a huge overlap in functionality. What am I missing?


  [1]: https://docs.python.org/3/library/asyncio-task.html#asyncio.gather
  [2]: https://docs.python.org/3/library/asyncio-task.html#asyncio.wait

Asyncio.gather vs asyncio.wait

As I understand the `yield` keyword, if used from inside an iterator block, it returns flow of control to the calling code, and when the iterator is called again, it picks up where it left off.

Also, `await` not only waits for the callee, but it returns control to the caller, only to pick up where it left off when the caller `awaits` the method.

In other words-- [there is no thread](http://blog.stephencleary.com/2013/11/there-is-no-thread.html), and the &quot;concurrency&quot; of async and await is an illusion caused by clever flow of control, the details of which are concealed by the syntax.

Now, I&#39;m a former assembly programmer and I&#39;m very familiar with instruction pointers, stacks, etc. and I get how normal flows of control (subroutine, recursion, loops, branches) work.  But these new constructs-- I don&#39;t get them.

When an `await` is reached, how does the runtime know what piece of code should execute next?  How does it know when it can resume where it left off, and how does it remember where?  What happens to the current call stack, does it get saved somehow?  What if the calling method makes other method calls before it `await`s-- why doesn&#39;t the stack get overwritten?  And how on earth would the runtime work its way through all this in the case of an exception and a stack unwind?

When `yield` is reached, how does the runtime keep track of the point where things should be picked up?  How is iterator state preserved?

How do yield and await implement flow of control in .NET?

I am struggling to figure out the issue with the following syntax:

    export const sendVerificationEmail = async () =&gt;
      (dispatch) =&gt; {
        try {
          dispatch({ type: EMAIL_FETCHING, payload: true });
          await Auth.sendEmailVerification();
          dispatch({ type: EMAIL_FETCHING, payload: false }))
        } catch (error) {
          dispatch({ type: EMAIL_FETCHING, payload: false });
          throw new Error(error);
        }
      };

I keep getting error saying:

&gt; await is a reserved word

...but isn&#39;t it legal within an async function?

The dispatch bit is coming from the [**react-thunk**][1] library.


  [1]: https://github.com/gaearon/redux-thunk

Await is a reserved word error inside async function

I&#39;m having major SQL performance problems when using async calls. I have created a small case to demonstrate the problem.

I have create a database on a SQL Server 2016 which resides in our LAN (so not a localDB).

In that database, I have a table `WorkingCopy` with 2 columns: 

    Id (nvarchar(255, PK))
    Value (nvarchar(max))

**DDL**

    CREATE TABLE [dbo].[Workingcopy]
    (
  	    [Id] [nvarchar](255) NOT NULL, 
 	    [Value] [nvarchar](max) NULL, 

	    CONSTRAINT [PK_Workingcopy] 
            PRIMARY KEY CLUSTERED ([Id] ASC)
	                    WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, 
                              IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, 
                              ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
    ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

In that table, I have inserted a single record (`id`=&#39;PerfUnitTest&#39;, `Value` is a 1.5mb string (a zip of a larger JSON dataset)).

Now, if I execute the query in SSMS :

    SELECT [Value] 
    FROM [Workingcopy] 
    WHERE id = &#39;perfunittest&#39;

I immediately get the result, and I see in SQL Servre Profiler that the execution time was around 20 milliseconds. All normal.

When executing the query from .NET (4.6) code using a plain `SqlConnection` :

	// at this point, the connection is already open
	var command = new SqlCommand($&quot;SELECT Value FROM WorkingCopy WHERE Id = @Id&quot;, _connection);
	command.Parameters.Add(&quot;@Id&quot;, SqlDbType.NVarChar, 255).Value = key;

	string value = command.ExecuteScalar() as string;
			
The execution time for this is also around 20-30 milliseconds. 

But when changing it to async code : 

    string value = await command.ExecuteScalarAsync() as string;

The execution time is suddenly **1800 ms** ! Also in SQL Server Profiler, I see that the query execution duration is more than a second. Although the executed query reported by the profiler is exactly the same as the non-Async version.

But it gets worse. If I play around with the Packet Size in the connection string, I get the following results :

&gt; Packet size  32768 : [TIMING]: ExecuteScalarAsync in SqlValueStore -&gt;
&gt; elapsed time : 450 ms
&gt; 
&gt; Packet Size 4096 : [TIMING]: ExecuteScalarAsync in SqlValueStore -&gt;
&gt; elapsed time : 3667 ms
&gt; 
&gt; Packet size  512 : [TIMING]: ExecuteScalarAsync in SqlValueStore -&gt;
&gt; elapsed time : 30776 ms

**30,000 ms**!! That&#39;s over a 1000x slower than the non-async version. And SQL Server Profiler reports that the query execution took over 10 seconds. That doesn&#39;t even explain where the other 20 seconds are gone to!

Then I&#39;ve switched back to the sync version and also played around with the Packet Size, and although it did impact a little the execution time, it was nowhere as dramatic as with the async version.

As a sidenote, if it put just a small string (&lt; 100bytes) into the value, the async query execution is just as fast as the sync version (result in 1 or 2 ms).

I&#39;m really baffled by this, especially since I&#39;m using the built-in `SqlConnection`, not even an ORM. Also when searching around, I found nothing which could explain this behavior. Any ideas?

Horrible performance using SqlCommand Async methods with large data

I&#39;m getting compile time error with this code: 


    const someFunction = async (myArray) =&gt; {
        return myArray.map(myValue =&gt; {
            return {
                id: &quot;my_id&quot;,
                myValue: await service.getByValue(myValue);
            }
        });
    };

Error message is:  

&gt; await is a reserved word

Why can&#39;t I use it like this? 

I also tried another way, but it gives me same error:

     const someFunction = async (myArray) =&gt; {
        return myArray.map(myValue =&gt; {
            const myNewValue = await service.getByValue(myValue);
            return {
                id: &quot;my_id&quot;,
                myValue: myNewValue 
            }
        });
    };


Async/Await inside Array#map()

How can I reject a promise that returned by an `async`/`await` function?

e.g. Originally:
```js
foo(id: string): Promise&lt;A&gt; {
  return new Promise((resolve, reject) =&gt; {
    someAsyncPromise().then((value)=&gt;resolve(200)).catch((err)=&gt;reject(400))
  });
}
```

Translate into `async`/`await`:
```js
async foo(id: string): Promise&lt;A&gt; {
  try{
    await someAsyncPromise();
    return 200;
  } catch(error) {//here goes if someAsyncPromise() rejected}
    return 400; //this will result in a resolved promise.
  });
}
```

So, how could I properly reject this promise in this case?

How to reject in async/await syntax?

I have been playing around with the feature in an SPA using TypeScript and native Promises, and I notice that even if I refactor a long-running function into an async function returning a promise, the UI is still unresponsive.

So my questions are:

 - How exactly does the new async/await feature help avoid blocking the UI in the browser? Are there any special extra steps one needs to take when using async/await to actually get a responsive UI?

 - Can someone create a fiddle to demonstrate the how async/await helps to make the UI responsive?

 - How does async/await relate to prior async features such as setTimeout and XmlHttpRequest?


Is async await truly non-blocking in the browser?

I&#39;m trying async/await functionality. I have such code imitating a request:

    const getJSON = async () =&gt; {
      const request = () =&gt; new Promise((resolve, reject) =&gt; (
        setTimeout(() =&gt; resolve({ foo: &#39;bar&#39;}), 2000)
      ));
      
      const json = await request();
      return json;
    }
    
When I use the code in this way 

    console.log(getJSON()); // returns Promise

it returns a Promise 

but when I call this line of code 

    getJSON().then(json =&gt; console.log(json)); // prints { foo: &#39;bar&#39; }

it prints json as expected

Is it possible to use just code like `console.log(getJSON())`? What don&#39;t I understand? 

async/await always returns promise

I like the flatness of the new `Async/Await` feature available in Typescript, etc. However, I&#39;m not sure I like the fact that I have to declare the variable I&#39;m `await`ing on the outside of a `try...catch` block in order to use it later. Like so:

    let createdUser
    try {
        createdUser = await this.User.create(userInfo)
    } catch (error) {
        console.error(error)
    }
    
    console.log(createdUser)
    // business
    // logic
    // goes
    // here

Please correct me if I&#39;m wrong, but it seems to be best practice _not_ to place multiple lines of business logic in the `try` body, so I&#39;m left only with the alternative of declaring `createdUser` outside the block, assigning it in the block, and then using it after.

What is best practice in this instance?


Content Type	Original Author	Original Content on Stackoverflow
Question	Abhijeet	View Question on Stackoverflow
Solution 1 - Javascript	slebetman	View Answer on Stackoverflow

Is it safe to use async/await now?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Targeting flex items on the last or specific row

Use of never keyword in typescript

Attributions