Following 

**[How to use async/await with axios in react][1]**

I am trying to make a simple get request to my server using Async/Await in a React.js App. 
The server loads a simple JSON at `/data` which looks like this

**JSON**

    {
       id: 1,
       name: &quot;Aditya&quot;
    }
I am able to get the data to my React App using simple jquery ajax get method.
However, I want to make use of axios library and Async/Await to follow ES7 standards.
My current code looks like this:

    class App extends React.Component{
     async getData(){
         const res = await axios(&#39;/data&#39;);
         console.log(res.json());
     }
     render(){
         return(
             &lt;div&gt;
                 {this.getData()}
             &lt;/div&gt;
         );
     }
    }

Using this approach I get the following error: 

&gt; Objects are not valid as a React child (found: [object Promise]). If
&gt; you meant to render a collection of children, use an array instead.

Am I not implementing it correctly?


  [1]: https://medium.com/@adityasingh_32512/how-to-use-async-await-with-axios-in-react-e07daac2905f

Use Async/Await with Axios in React.js

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?

I&#39;m trying to learn async-await. In this code - 

    const myFun = () =&gt; {
        let state = false;
    
        setTimeout(() =&gt; {state = true}, 2000);
    
        return new Promise((resolve, reject) =&gt; {
            setTimeout(() =&gt; {
                if(state) {
                    resolve(&#39;State is true&#39;);
                } else {
                    reject(&#39;State is false&#39;);
                }
            }, 3000);
        });
    }
    
    const getResult = async () =&gt; {
        return await myFun();
    }
    
    console.log(getResult());

why am I getting output as -

    Promise { &lt;pending&gt; }

Instead of some value? Shouldn&#39;t the `getResult()` function wait for `myFun()` function resolve it&#39;s promise value?

async function - await not waiting for promise

I was experimenting with how `/` is interpreted when around different keywords and operators, and found that the following syntax is perfectly legal:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    // awaiting something that isn&#39;t a Promise is fine, it&#39;s just strange to do:
    const foo = await /barbaz/
    myFn()

&lt;!-- end snippet --&gt;

Error:
&gt;Uncaught ReferenceError: await is not defined

It looks like it tries to parse the `await` as a *variable name*..? I was expecting

&gt;await is only valid in async function

or maybe something like

&gt;Unexpected token await

To my horror, you can even assign things to it:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    const await = &#39;Wait, this actually works?&#39;;
    console.log(await);

&lt;!-- end snippet --&gt;

Shouldn&#39;t something so obviously wrong cause a syntax error, as it does with `let`, `finally`, `break`, etc? Why is this allowed, and what the heck is going on in the first snippet?

Why are await and async valid variable names?

I&#39;m digging into the node 7 async/await feature and keep stumbling across code like this

    

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    function getQuote() {
      let quote = &quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit laborum.&quot;;
      return quote;
    }

    async function main() {
      try {
        var quote = await getQuote();
        console.log(quote);
      } catch (error) {
        console.error(error);
      }
    }

    main();

&lt;!-- end snippet --&gt;

This seems to be the only possibility resolve/reject or return/throw with async/await, however, v8 doesn&#39;t optimise code within try/catch blocks?!

Are there alternatives?

try/catch blocks with async/await

When using a simple callback such as in the example below:

    test() {
      api.on( &#39;someEvent&#39;, function( response ) {
        return response;
      });
    }

How can the function be changed to use async / await?  Specifically, assuming &#39;someEvent&#39; is guaranteed to be called once and only once, I&#39;d like the function test to be an async function which does not return until the callback is executed such as:

    async test() {
      return await api.on( &#39;someEvent&#39; );
    }


How to &quot;await&quot; for a callback to return?

Are there any issues with using `async`/`await` in a `forEach` loop? I&#39;m trying to loop through an array of files and `await` on the contents of each file. 

    import fs from &#39;fs-promise&#39;

    async function printFiles () {
      const files = await getFilePaths() // Assume this works fine

      files.forEach(async (file) =&gt; {
        const contents = await fs.readFile(file, &#39;utf8&#39;)
        console.log(contents)
      })
    }

    printFiles()

This code does work, but could something go wrong with this? I had someone tell me that you&#39;re not supposed to use `async`/`await` in a higher-order function like this, so I just wanted to ask if there was any issue with this.

Using async/await with a forEach loop

I am trying to use the new async features and I hope solving my problem will help others in the future. This is my code which is working:

      async function asyncGenerator() {
        // other code
        while (goOn) {
          // other code
          var fileList = await listFiles(nextPageToken);
          var parents = await requestParents(fileList);
          // other code
        }
        // other code
      }
    
      function listFiles(token) {
        return gapi.client.drive.files.list({
          &#39;maxResults&#39;: sizeResults,
          &#39;pageToken&#39;: token,
          &#39;q&#39;: query
        });
      }

The problem is, that my while loop runs too fast and the script sends too many requests per second to the google API. Therefore I would like to build a sleep function which delays the request. Thus I could also use this function to delay other requests. If there is another way to delay the request, please let me know.

Anyway, this is my new code which does not work. The response of the request is returned to the anonymous async function within the setTimeout, but I just do not know how I can return the response to the sleep function resp. to the initial asyncGenerator function.

      async function asyncGenerator() {
        // other code
        while (goOn) {
          // other code
          var fileList = await sleep(listFiles, nextPageToken);
          var parents = await requestParents(fileList);
          // other code
        }
        // other code
      }
    
      function listFiles(token) {
        return gapi.client.drive.files.list({
          &#39;maxResults&#39;: sizeResults,
          &#39;pageToken&#39;: token,
          &#39;q&#39;: query
        });
      }
    
      async function sleep(fn, par) {
        return await setTimeout(async function() {
          await fn(par);
        }, 3000, fn, par);
      }

I have already tried some options: storing the response in a global variable and return it from the sleep function, callback within the anonymous function, etc.

Combination of async function + await + setTimeout

In https://stackoverflow.com/a/18658613/779159 is an example of how to calculate the md5 of a file using the built-in crypto library and streams.

    var fs = require(&#39;fs&#39;);
    var crypto = require(&#39;crypto&#39;);
    
    // the file you want to get the hash    
    var fd = fs.createReadStream(&#39;/some/file/name.txt&#39;);
    var hash = crypto.createHash(&#39;sha1&#39;);
    hash.setEncoding(&#39;hex&#39;);
    
    fd.on(&#39;end&#39;, function() {
        hash.end();
        console.log(hash.read()); // the desired sha1sum
    });
    
    // read all file and pipe it (write it) to the hash object
    fd.pipe(hash);

But is it possible to convert this to using ES8 async/await instead of using the callback as seen above, but while still keeping the efficiency of using streams?

How to use ES8 async/await with streams?

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?


Correct Try...Catch Syntax Using Async/Await

I&#39;m working on an ng2 implementation. I&#39;m using the following function call to convert an object to an array:

    var authors = Object.entries(responseObject.Authors);

This is a standard js function. However, the ts compiler returns the following error:

    &quot;Property &#39;entries&#39; does not exist on type &#39;ObjectConstructor&#39;&quot;

Based on a quick google it appears that the solution may be to change the compilerOptions target property from es5 to es6. However, after some previous research for a previous issue, I thought that I was able to leverage es6 functionality by including the additional &quot;lib&quot; property on my tsconfig.json below:

      &quot;compilerOptions&quot;: {
        &quot;emitDecoratorMetadata&quot;: true,
        &quot;experimentalDecorators&quot;: true,
        &quot;module&quot;: &quot;commonjs&quot;,
        &quot;noEmitOnError&quot;: true,
        &quot;noImplicitAny&quot;: false,
        &quot;outDir&quot;: &quot;../Scripts/&quot;,
        &quot;removeComments&quot;: false,
        &quot;sourceMap&quot;: true,
        &quot;target&quot;: &quot;es5&quot;,
        &quot;moduleResolution&quot;: &quot;node&quot;,
        &quot;lib&quot;: [
          &quot;es2015&quot;,
          &quot;dom&quot;
        ]
      }

I also tried changing the target property to es2015 and then rebuilt the project and executed &quot;typescriptUsingTsConfig&quot; but I still get the same error. Any idea what I can do here in order to leverage the `Object.entries()` function?

Property &#39;entries&#39; does not exist on type &#39;ObjectConstructor&#39;

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&#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()

Is it or will it be possible to have an ES6 class getter
return a value from an ES2017 await / async function.

    class Foo {
        async get bar() {
            var result = await someAsyncOperation();
    
            return result;
        }
    }
    
    function someAsyncOperation() {
        return new Promise(function(resolve) {
            setTimeout(function() {
                resolve(&#39;baz&#39;);
            }, 1000);
        });
    }
    
    var foo = new Foo();
    
    foo.bar.should.equal(&#39;baz&#39;);

(ES6) class (ES2017) async / await getter

I have been going over `async`/`await` and after going over several articles, I decided to test things myself. However, I can&#39;t seem to wrap my head around why this does not work:

```js
async function main() {  
    var value = await Promise.resolve(&#39;Hey there&#39;);
    console.log(&#39;inside: &#39; + value);
    return value;
}

var text = main();  
console.log(&#39;outside: &#39; + text);
```

The console outputs the following (node v8.6.0) :

&gt; \&gt; outside: [object Promise]
&gt;
&gt; \&gt; inside: Hey there

Why does the log message inside the function execute afterwards? I thought the reason `async`/`await` was created was in order to perform synchronous execution using asynchronous tasks.

Is there a way could I use the value returned inside the function without using a `.then()` after `main()`?

How can I use async/await at the top level?

action.js

    export function getLoginStatus() {
      return async(dispatch) =&gt; {
        let token = await getOAuthToken();
        let success = await verifyToken(token);
        if (success == true) {
          dispatch(loginStatus(success));
        } else {
          console.log(&quot;Success: False&quot;);
          console.log(&quot;Token mismatch&quot;);
        }
        return success;
      }
    }


component.js

      componentDidMount() {
        this.props.dispatch(splashAction.getLoginStatus())
          .then((success) =&gt; {
            if (success == true) {
              Actions.counter()
            } else {
              console.log(&quot;Login not successfull&quot;);
            }
         });
       }
     
However, when I write component.js code with async/await like below I get this error:    

`Possible Unhandled Promise Rejection (id: 0): undefined is not a function (evaluating &#39;this.props.dispatch(splashAction.getLoginStatus())&#39;)`

component.js

      async componentDidMount() {
         let success = await this.props.dispatch(splashAction.getLoginStatus());
         if (success == true) {
           Actions.counter()
         } else {
           console.log(&quot;Login not successfull&quot;);
         }
       }

How do I await a getLoginStatus() and then execute the rest of the statements?
Everything works quite well when using .then(). I doubt something is missing in my async/await implementation. trying to figure that out.

how to async/await redux-thunk actions?

Given the following code:

    var arr = [1,2,3,4,5];
    
    var results: number[] = await arr.map(async (item): Promise&lt;number&gt; =&gt; {
            await callAsynchronousOperation(item);
            return item + 1;
        });

which produces the following error:

&gt; TS2322: Type &#39;Promise&amp;lt;number&amp;gt;[]&#39; is not assignable to type &#39;number[]&#39;.
&gt; Type &#39;Promise&amp;lt;number&amp;gt; is not assignable to type &#39;number&#39;.

How can I fix it? How can I make `async await` and `Array.map` work together?


Use async await with Array.map

One can `await` a non-Promise and [that&#39;s good so][1].

All these expressions are valid and cause no error:

    await 5
    await &#39;A&#39;
    await {}
    await null
    await undefined 

Is there any **detectable effect** of awaiting a non-Promise? Is there any difference in behavior one should be aware of to avoid a potential error? Any performance differences?

Are the following two lines completely same or do they *theoretically* differ?:

    var x = 5
    var x = await 5

How? Any example to demonstrate the difference? 

PS: According [TypeScript authors][2], there is a difference:

&gt;`var x = await 5;` is not the same as `var x = 5;`; `var x = await 5;` will assign x 5 in the next tern, where as `var x = 5;` will evaluate immediately.


  [1]: https://github.com/Microsoft/TypeScript/issues/8310
  [2]: https://github.com/Microsoft/TypeScript/issues/8310#issuecomment-214892918

Does awaiting a non-Promise have any detectable effect?

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? 

All Ecmascript 2017 Solutions on Gang of Coders

Total of 20 Ecmascript 2017 Solutions