{
    "componentChunkName": "component---src-components-blog-post-jsx",
    "path": "/blog/2020-02-25-finally/",
    "result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"9265b187-a105-5ef9-bd16-dbde62fa1238","timeToRead":1,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Finally(), I'll clean up my Promises!\",\n  \"date\": \"2020-02-25T13:19:10.285Z\",\n  \"template\": \"post\",\n  \"draft\": true,\n  \"slug\": \"2020-02-25-finally\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"When handling asynchronous operations sometimes it is necessary to update the state after the promise resolves regardless of it was successful or rejected. In order to avoid having to duplicate this cleanup code there's a handy method, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"finally()\"), \" that has a callback function that is executed once a promise settles by either being fulfilled or rejected. So if for example you want to update the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loading\"), \" state from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \" to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \" after a promise settles regardless of the response was an error or not you can do something like.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"fetch(\\\"https://dog.ceo/api/breeds/image/random\\\")\\n  // handle successful response\\n  .then(response => response.json())\\n  .then(json =>\\n    this.setState(\\n      {\\n        imgUrl: json.message,\\n      },\\n      () => {}\\n    )\\n  )\\n  // if there's an error log it!\\n  .catch(err => console.log(err))\\n  // once promise resolves loading should be set to false\\n  // regardless of if data was returned or if there was an error\\n  .finally(() => this.setState({ loading: false }))\\n\")), mdx(\"p\", null, \"Learn more at: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally\"\n  }, \"Promise.prototype.finally() - JavaScript | MDN\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{},"frontmatter":{"title":"Finally(), I'll clean up my Promises!","date":"February 25, 2020","description":null,"tags":null}},"allWebMentionEntry":{"edges":[]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/2020-02-25-finally/","slug":"/blog/2020-02-25-finally/","prev":{"id":"50177180-5290-5299-b503-191bdcca8439","frontmatter":{"title":"HTTP HEAD request","category":null,"date":"2020-02-28T13:19:10.285Z","slug":"2020-02-28-HTTP-head","tags":null,"redirects":null},"fields":{"slug":"/blog/2020-02-28-HTTP-head/"}},"next":{"id":"5ddf86ab-341b-5603-874c-97c8d3ade985","frontmatter":{"title":"Automating File Creation With JavaScript","category":["tutorial"],"date":"2020-01-29T12:40:44.608Z","slug":"2020-01-29-automating-file-creation-with-javascript","tags":["JavaScript","Tutorial"],"redirects":null},"fields":{"slug":"/blog/2020-01-29-automating-file-creation-with-javascript/"}}}},
    "staticQueryHashes": ["1977783444","764694655"]}