a26f5e48.4db597d5.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{107:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return u}));var a=n(3),r=n(7),o=(n(0),n(134)),i={slug:"optimize-your-promise-by-using-async-await-in-react",title:"Optimize Your Promise by Using Async/Await in React",author:"Bunlong",author_title:"React Patterns Team",author_url:"https://github.com/Bunlong",author_image_url:"https://avatars1.githubusercontent.com/u/37023003?s=400&u=0049c6773040efb265cdf622076305f8b47facec&v=4",tags:["async/await","async","await"],image:"/img/optimize-your-promise-by-using-async-await.png"},c={permalink:"/blog/optimize-your-promise-by-using-async-await-in-react",source:"@site/blog/2020-11-28-optimize-your-promise-by-using-async-await-in-react.md",description:"Optimize Your Promise by Using Async/Await in React",date:"2020-11-28T00:00:00.000Z",tags:[{label:"async/await",permalink:"/blog/tags/async-await"},{label:"async",permalink:"/blog/tags/async"},{label:"await",permalink:"/blog/tags/await"}],title:"Optimize Your Promise by Using Async/Await in React",readingTime:1.17,truncated:!0,prevItem:{title:"Pros and Cons of Using TypeScript with React",permalink:"/blog/pros-and-cons-of-using-typescript-with-react"},nextItem:{title:"When to useMemo and useCallback?",permalink:"/blog/usememo-and-usecallback"}},s=[{value:"Escape Syntax Complexity",id:"escape-syntax-complexity",children:[{value:"Without Using Async/Await",id:"without-using-asyncawait",children:[]},{value:"Using Async/Await",id:"using-asyncawait",children:[]}]},{value:"Why Async/Await?",id:"why-asyncawait",children:[]},{value:"How to Use it?",id:"how-to-use-it",children:[]}],l={rightToc:s};function u(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,Object(o.b)("img",{alt:"Optimize Your Promise by Using Async/Await in React",src:n(161).default,title:"Optimize Your Promise by Using Async/Await in React"})),Object(o.b)("p",null,"When Promise was introduced in ES5, it was meant to solve a problem with asynchronous code, and they did, but over the 2 years that separated ES5 and ES7, it was clear that promises could not be the final solution."),Object(o.b)("p",null,"Promise was introduced to solve the famous callback hell problem, but they introduced complexity on their own, and syntax complexity."),Object(o.b)("p",null,"How can we escape Promise syntax complexity? Good things come to those who Await."),Object(o.b)("h2",{id:"escape-syntax-complexity"},"Escape Syntax Complexity"),Object(o.b)("h3",{id:"without-using-asyncawait"},"Without Using Async/Await"),Object(o.b)("p",null,"Don't over complicate your code and save time using Async/Await."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"const getUses = () => {\n  fetch('https://api.example.com.com/users')\n    .then((result) =>\n      result\n        .json()\n        .then((users) => console.log(users))\n        .catch((error) => console.log(error))\n    )\n    .catch((error) => console.log(error));\n};\n")),Object(o.b)("h3",{id:"using-asyncawait"},"Using Async/Await"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"const getUsers = async () => {\n  try {\n    const result = await fetch('https://api.example.com.com/users');\n    const users = await result.json();\n    console.log(users);\n  } catch (error) {\n    console.log(error);\n  }\n};\n")),Object(o.b)("h2",{id:"why-asyncawait"},"Why Async/Await?"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"Added in ES6 as a native implementation by default"),Object(o.b)("li",{parentName:"ul"},"Make your code cleaner"),Object(o.b)("li",{parentName:"ul"},"Make your request and code maintenance easier"),Object(o.b)("li",{parentName:"ul"},"Reduce .catch to handle errors")),Object(o.b)("h2",{id:"how-to-use-it"},"How to Use it?"),Object(o.b)("p",null,"Create a function with async keyword."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"const getPhotos = async (user) => {\n  ...\n};\n")),Object(o.b)("p",null,"Use await inside an async function only."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"const response = await getPhotos('Jonh');\nconsole.log(response);\n")))}u.isMDXComponent=!0},134:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var a=n(0),r=n.n(a);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),u=function(e){var t=r.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=u(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},y=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,i=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),p=u(n),y=a,m=p["".concat(i,".").concat(y)]||p[y]||b[y]||o;return n?r.a.createElement(m,c(c({ref:t},l),{},{components:n})):r.a.createElement(m,c({ref:t},l))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=y;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var l=2;l<o;l++)i[l]=n[l];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}y.displayName="MDXCreateElement"},161:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/optimize-your-promise-by-using-async-await-20def419263bece126e69815d5ba6762.png"}}]);