{"id":198,"date":"2023-04-07T23:23:52","date_gmt":"2023-04-07T23:23:52","guid":{"rendered":"https:\/\/www.w3computing.com\/articles\/?p=198"},"modified":"2023-08-23T16:22:28","modified_gmt":"2023-08-23T16:22:28","slug":"advanced-asynchronous-javascript-promises-async-await-fetch-api","status":"publish","type":"post","link":"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/","title":{"rendered":"Advanced Asynchronous JavaScript: Promises, Async\/Await, and Fetch API"},"content":{"rendered":"\n

Asynchronous programming is an essential part of modern web development, enabling seamless user experiences and improving application performance. Experienced developers often seek advanced techniques for handling asynchronous code to create more efficient, readable, and maintainable applications. In this guide, we will explore advanced asynchronous JavaScript concepts, focusing on Promises, Async\/Await, and the Fetch API.<\/p>\n\n\n\n

1. Promises<\/h2>\n\n\n\n

Promises are a powerful tool in JavaScript for handling asynchronous operations, providing a cleaner and more intuitive syntax compared to traditional callback-based patterns. They represent the eventual completion (or failure) of an asynchronous operation and its resulting value.<\/p>\n\n\n\n

1.1 Creating and Consuming Promises<\/h3>\n\n\n\n

To create a Promise, use the Promise constructor, which takes a single argument\u2014a function called the “executor.” The executor function receives two arguments: resolve and reject, which are functions used to fulfill or reject the Promise.<\/p>\n\n\n

const<\/span> myPromise = new<\/span> Promise<\/span>((resolve, reject<\/span>) =><\/span> {\n  \/\/ Asynchronous operation<\/span>\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
To consume a Promise, use the .then()<\/code><\/strong> method to handle a fulfilled Promise and the .catch()<\/strong><\/code> method to handle a rejected Promise. Additionally, use the .finally()<\/strong><\/code> method to execute code regardless of whether the Promise is fulfilled or rejected.<\/p>\n\n\n
myPromise\n  .then((result<\/span>) =><\/span> {\n    console<\/span>.log('Fulfilled:'<\/span>, result);\n  })\n  .catch((error<\/span>) =><\/span> {\n    console<\/span>.error('Rejected:'<\/span>, error);\n  })\n  .finally(()<\/span> =><\/span> {\n    console<\/span>.log('Promise settled'<\/span>);\n  });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
1.2 Promise Chaining<\/h3>\n\n\n\n
Promise chaining allows you to perform multiple asynchronous operations sequentially, with each .then()<\/code><\/strong> returning a new Promise.<\/p>\n\n\n
fetch('https:\/\/api.example.com\/data'<\/span>)\n  .then((response<\/span>) =><\/span> response.json())\n  .then((data<\/span>) =><\/span> processData(data))\n  .catch((error<\/span>) =><\/span> console<\/span>.error('Error:'<\/span>, error));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
1.3 Promise Combinators<\/h3>\n\n\n\n
Promise combinators like Promise.all()<\/code><\/strong>, Promise.race()<\/code><\/strong>, Promise.allSettled()<\/code><\/strong>, and Promise.any()<\/code><\/strong> can be used to handle multiple Promises simultaneously.<\/p>\n\n\n\n
2. Async\/Await<\/h2>\n\n\n\n
Async\/Await is a syntactic sugar built on top of Promises, providing a more readable and concise way to write asynchronous code.<\/p>\n\n\n\n
2.1 The async keyword<\/h3>\n\n\n\n
The async<\/code><\/strong> keyword is used to declare an asynchronous function, which always returns a Promise.<\/p>\n\n\n
async<\/span> function<\/span> getData<\/span>(<\/span>) <\/span>{\n  \/\/ Asynchronous operation<\/span>\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
2.2 The await keyword<\/h3>\n\n\n\n
The await<\/code><\/strong> keyword can only be used within an async<\/code><\/strong> function. It makes the function execution pause and wait for a Promise to resolve or reject before continuing.<\/p>\n\n\n
async<\/span> function<\/span> getData<\/span>(<\/span>) <\/span>{\n  const<\/span> response = await<\/span> fetch('https:\/\/api.example.com\/data'<\/span>);\n  const<\/span> data = await<\/span> response.json();\n  return<\/span> data;\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
2.3 Error Handling<\/h3>\n\n\n\n
To handle errors with Async\/Await, use try-catch blocks.<\/p>\n\n\n
async<\/span> function<\/span> getData<\/span>(<\/span>) <\/span>{\n  try<\/span> {\n    const<\/span> response = await<\/span> fetch('https:\/\/api.example.com\/data'<\/span>);\n    const<\/span> data = await<\/span> response.json();\n    return<\/span> data;\n  } catch<\/span> (error) {\n    console<\/span>.error('Error:'<\/span>, error);\n  }\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
3. Fetch API<\/h2>\n\n\n\n
The Fetch API is a modern, flexible, and powerful approach to making network requests in JavaScript, providing a more intuitive and efficient way to handle asynchronous data fetching compared to older methods like XMLHttpRequest.<\/p>\n\n\n\n
3.1 Basic Usage<\/h3>\n\n\n\n
To make a simple GET request using the Fetch API, call the fetch()<\/strong><\/code> function with the URL as an argument.<\/p>\n\n\n
fetch('https:\/\/api.example.com\/data'<\/span>)\n  .then((response<\/span>) =><\/span> response.json())\n  .then((data<\/span>) =><\/span> console<\/span>.log(data))\n  .catch((error<\/span>) =><\/span> console<\/span>.error('Error:'<\/span>, error));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
3.2 Handling Different Response Types<\/h3>\n\n\n\n
The Fetch API provides methods to handle different response types, such as .json()<\/strong><\/code>, .text()<\/code><\/strong>, .blob()<\/code><\/strong>, and .arrayBuffer()<\/code><\/strong>.<\/p>\n\n\n
fetch('https:\/\/api.example.com\/data'<\/span>)\n  .then((response<\/span>) =><\/span> response.text())\n  .then((text<\/span>) =><\/span> console<\/span>.log(text))\n  .catch((error<\/span>) =><\/span> console<\/span>.error('Error:'<\/span>, error));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
3.3 Making POST Requests<\/h3>\n\n\n\n
To make a POST request, pass an options object with method<\/code><\/strong>, headers<\/code><\/strong>, and body<\/code><\/strong> properties to the fetch()<\/code><\/strong> function.<\/p>\n\n\n
fetch('https:\/\/api.example.com\/data'<\/span>, {\n  method<\/span>: 'POST'<\/span>,\n  headers<\/span>: {\n    'Content-Type'<\/span>: 'application\/json'<\/span>\n  },\n  body<\/span>: JSON<\/span>.stringify({\n    key<\/span>: 'value'<\/span>\n  })\n})\n  .then((response<\/span>) =><\/span> response.json())\n  .then((data<\/span>) =><\/span> console<\/span>.log(data))\n  .catch((error<\/span>) =><\/span> console<\/span>.error('Error:'<\/span>, error));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
3.4 Handling Request and Response Headers<\/h3>\n\n\n\n
The Fetch API provides the Headers<\/code><\/strong> class to manage request and response headers.<\/p>\n\n\n
const<\/span> headers = new<\/span> Headers();\nheaders.append('Content-Type'<\/span>, 'application\/json'<\/span>);\nheaders.append('Authorization'<\/span>, 'Bearer '<\/span> + token);\n\nfetch('https:\/\/api.example.com\/secure-data'<\/span>, {\n  method<\/span>: 'GET'<\/span>,\n  headers<\/span>: headers\n})\n  .then((response<\/span>) =><\/span> response.json())\n  .then((data<\/span>) =><\/span> console<\/span>.log(data))\n  .catch((error<\/span>) =><\/span> console<\/span>.error('Error:'<\/span>, error));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
3.5 AbortController<\/h3>\n\n\n\n
The AbortController<\/code><\/strong> and AbortSignal<\/code><\/strong> classes can be used to cancel Fetch requests.<\/p>\n\n\n
const<\/span> controller = new<\/span> AbortController();\nconst<\/span> signal = controller.signal;\n\nsetTimeout(()<\/span> =><\/span> {\n  controller.abort();\n}, 5000<\/span>);\n\nfetch('https:\/\/api.example.com\/data'<\/span>, { signal })\n  .then((response<\/span>) =><\/span> response.json())\n  .then((data<\/span>) =><\/span> console<\/span>.log(data))\n  .catch((error<\/span>) =><\/span> {\n    if<\/span> (error.name === 'AbortError'<\/span>) {\n      console<\/span>.log('Fetch aborted'<\/span>);\n    } else<\/span> {\n      console<\/span>.error('Error:'<\/span>, error);\n    }\n  });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Example Exercise<\/h2>\n\n\n\n
In this exercise, we will create a simple weather application that fetches weather data from an API, processes the data, and displays it on a web page. We will use advanced asynchronous JavaScript techniques, including Promises, Async\/Await, and the Fetch API.:<\/p>\n\n\n\n
Sign up for a free account on OpenWeather<\/a> to get an API key.<\/p>\n\n\n\n
Create an index.html<\/code><\/strong> file with the following content:<\/p>\n\n\n
<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n<head<\/span>><\/span>\n  <meta<\/span> charset<\/span>=\"UTF-8\"<\/span>><\/span>\n  <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\n  <title<\/span>><\/span>Weather App<\/title<\/span>><\/span>\n<\/head<\/span>><\/span>\n<body<\/span>><\/span>\n  <h1<\/span>><\/span>Weather App<\/h1<\/span>><\/span>\n  <form<\/span> id<\/span>=\"weather-form\"<\/span>><\/span>\n    <input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"city\"<\/span> placeholder<\/span>=\"Enter city name\"<\/span> required<\/span>><\/span>\n    <button<\/span> type<\/span>=\"submit\"<\/span>><\/span>Get Weather<\/button<\/span>><\/span>\n  <\/form<\/span>><\/span>\n  <div<\/span> id<\/span>=\"weather-result\"<\/span>><\/span><\/div<\/span>><\/span>\n  <script<\/span> src<\/span>=\"app.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Create an app.js<\/code><\/strong> file with the following content:<\/p>\n\n\n
const<\/span> API_KEY = 'your_api_key'<\/span>; \/\/ Replace with your OpenWeather API key<\/span>\n\nconst<\/span> weatherForm = document<\/span>.getElementById('weather-form'<\/span>);\nconst<\/span> cityInput = document<\/span>.getElementById('city'<\/span>);\nconst<\/span> weatherResult = document<\/span>.getElementById('weather-result'<\/span>);\n\nweatherForm.addEventListener('submit'<\/span>, async<\/span> (event) => {\n  event.preventDefault();\n  const<\/span> city = cityInput.value.trim();\n\n  try<\/span> {\n    const<\/span> weatherData = await<\/span> fetchWeatherData(city);\n    const<\/span> processedData = processWeatherData(weatherData);\n    displayWeather(processedData);\n  } catch<\/span> (error) {\n    console<\/span>.error('Error:'<\/span>, error);\n    weatherResult.textContent = 'An error occurred while fetching weather data'<\/span>;\n  }\n});\n\nasync<\/span> function<\/span> fetchWeatherData<\/span>(city<\/span>) <\/span>{\n  const<\/span> response = await<\/span> fetch(\n    `https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city}<\/span>&appid=${API_KEY}<\/span>&units=metric`<\/span>\n  );\n\n  if<\/span> (!response.ok) {\n    throw<\/span> new<\/span> Error<\/span>(`Failed to fetch weather data for ${city}<\/span>`<\/span>);\n  }\n\n  const<\/span> weatherData = await<\/span> response.json();\n  return<\/span> weatherData;\n}\n\nfunction<\/span> processWeatherData<\/span>(weatherData<\/span>) <\/span>{\n  const<\/span> { name, sys, main, weather } = weatherData;\n  const<\/span> { country } = sys;\n  const<\/span> { temp, humidity } = main;\n  const<\/span> { description } = weather[0<\/span>];\n\n  return<\/span> {\n    city<\/span>: name,\n    country<\/span>: country,\n    temperature<\/span>: temp,\n    humidity<\/span>: humidity,\n    description<\/span>: description,\n  };\n}\n\nfunction<\/span> displayWeather<\/span>(processedData<\/span>) <\/span>{\n  const<\/span> { city, country, temperature, humidity, description } = processedData;\n\n  weatherResult.innerHTML = `\n    <h2>${city}<\/span>, ${country}<\/span><\/h2>\n    <p>Temperature: ${temperature}<\/span>\u00b0C<\/p>\n    <p>Humidity: ${humidity}<\/span>%<\/p>\n    <p>Weather: ${description}<\/span><\/p>\n  `<\/span>;\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Replace ‘your_api_key<\/code><\/strong>‘ in the app.js<\/code><\/strong> file with your OpenWeather API key.<\/p>\n\n\n\n
In this example, we have created a simple weather application that uses advanced asynchronous JavaScript techniques. The fetchWeatherData()<\/code><\/strong> function uses the Fetch API and Async\/Await to fetch weather data from the OpenWeather API. The processWeatherData()<\/code><\/strong> function processes the fetched data, and the displayWeather()<\/code><\/strong> function displays the processed data on the web page.<\/p>\n\n\n\n
We have also used an event listener with an Async function to handle the form submission, making the code more readable and maintainable. The error handling is done using a try-catch block within the event listener, ensuring any errors that occur during the fetch or processing of data are caught and handled gracefully.<\/p>\n\n\n\n
To test the application, follow these steps:<\/p>\n\n\n\n
    \n
  1. Open the index.html<\/strong> file in your favorite web browser.<\/li>\n\n\n\n
  2. Enter a city name in the input field and click the “Get Weather” button.<\/li>\n\n\n\n
  3. Observe the displayed weather data for the specified city, including temperature, humidity, and a description of the current weather.<\/li>\n\n\n\n
  4. Try entering an invalid city name or disconnecting from the internet to see how the application handles errors.<\/li>\n<\/ol>\n\n\n\n
    This exercise demonstrates the power of advanced asynchronous JavaScript techniques, such as Promises, Async\/Await, and the Fetch API, in creating modern web applications that provide seamless user experiences and better performance. By using these techniques effectively, developers can write more efficient, readable, and maintainable code for handling asynchronous operations in their applications.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Asynchronous programming is an essential part of modern web development, enabling seamless user experiences and improving application performance. Experienced developers often seek advanced techniques for handling asynchronous code to create more efficient, readable, and maintainable applications. In this guide, we will explore advanced asynchronous JavaScript concepts, focusing on Promises, Async\/Await, and the Fetch API. 1. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7,4],"tags":[],"class_list":["post-198","post","type-post","status-publish","format-standard","category-javascript","category-programming-languages","entry"],"yoast_head":"\nAsynchronous JavaScript: Promises, Async\/Await, and Fetch API<\/title>\n<meta name=\"description\" content=\"In this guide, we will explore advanced asynchronous JavaScript concepts, focusing on Promises, Async\/Await, and the Fetch API\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Asynchronous JavaScript: Promises, Async\/Await, and Fetch API\" \/>\n<meta property=\"og:description\" content=\"In this guide, we will explore advanced asynchronous JavaScript concepts, focusing on Promises, Async\/Await, and the Fetch API\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-07T23:23:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T16:22:28+00:00\" \/>\n<meta name=\"author\" content=\"w3compadmin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"w3compadmin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/advanced-asynchronous-javascript-promises-async-await-fetch-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/advanced-asynchronous-javascript-promises-async-await-fetch-api\\\/\"},\"author\":{\"name\":\"w3compadmin\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#\\\/schema\\\/person\\\/a550b3e20d78bb4f79b7c6b7b53f0561\"},\"headline\":\"Advanced Asynchronous JavaScript: Promises, Async\\\/Await, and Fetch API\",\"datePublished\":\"2023-04-07T23:23:52+00:00\",\"dateModified\":\"2023-08-23T16:22:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/advanced-asynchronous-javascript-promises-async-await-fetch-api\\\/\"},\"wordCount\":717,\"commentCount\":0,\"articleSection\":[\"JavaScript\",\"Programming Languages\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/advanced-asynchronous-javascript-promises-async-await-fetch-api\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/advanced-asynchronous-javascript-promises-async-await-fetch-api\\\/\",\"url\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/advanced-asynchronous-javascript-promises-async-await-fetch-api\\\/\",\"name\":\"Asynchronous JavaScript: Promises, Async\\\/Await, and Fetch API\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#website\"},\"datePublished\":\"2023-04-07T23:23:52+00:00\",\"dateModified\":\"2023-08-23T16:22:28+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#\\\/schema\\\/person\\\/a550b3e20d78bb4f79b7c6b7b53f0561\"},\"description\":\"In this guide, we will explore advanced asynchronous JavaScript concepts, focusing on Promises, Async\\\/Await, and the Fetch API\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/advanced-asynchronous-javascript-promises-async-await-fetch-api\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/advanced-asynchronous-javascript-promises-async-await-fetch-api\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/advanced-asynchronous-javascript-promises-async-await-fetch-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Articles Home\",\"item\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Programming Languages\",\"item\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/programming-languages\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/programming-languages\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced Asynchronous JavaScript: Promises, Async\\\/Await, and Fetch API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#website\",\"url\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/\",\"name\":\"Developer Articles Hub\",\"description\":\"\",\"alternateName\":\"Developer Articles\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#\\\/schema\\\/person\\\/a550b3e20d78bb4f79b7c6b7b53f0561\",\"name\":\"w3compadmin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/wp-content\\\/litespeed\\\/avatar\\\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266\",\"url\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/wp-content\\\/litespeed\\\/avatar\\\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266\",\"contentUrl\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/wp-content\\\/litespeed\\\/avatar\\\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266\",\"caption\":\"w3compadmin\"},\"sameAs\":[\"http:\\\/\\\/w3computing.com\\\/articles\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Asynchronous JavaScript: Promises, Async\/Await, and Fetch API","description":"In this guide, we will explore advanced asynchronous JavaScript concepts, focusing on Promises, Async\/Await, and the Fetch API","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/","og_locale":"en_US","og_type":"article","og_title":"Asynchronous JavaScript: Promises, Async\/Await, and Fetch API","og_description":"In this guide, we will explore advanced asynchronous JavaScript concepts, focusing on Promises, Async\/Await, and the Fetch API","og_url":"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/","article_published_time":"2023-04-07T23:23:52+00:00","article_modified_time":"2023-08-23T16:22:28+00:00","author":"w3compadmin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"w3compadmin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/#article","isPartOf":{"@id":"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/"},"author":{"name":"w3compadmin","@id":"https:\/\/www.w3computing.com\/articles\/#\/schema\/person\/a550b3e20d78bb4f79b7c6b7b53f0561"},"headline":"Advanced Asynchronous JavaScript: Promises, Async\/Await, and Fetch API","datePublished":"2023-04-07T23:23:52+00:00","dateModified":"2023-08-23T16:22:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/"},"wordCount":717,"commentCount":0,"articleSection":["JavaScript","Programming Languages"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/","url":"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/","name":"Asynchronous JavaScript: Promises, Async\/Await, and Fetch API","isPartOf":{"@id":"https:\/\/www.w3computing.com\/articles\/#website"},"datePublished":"2023-04-07T23:23:52+00:00","dateModified":"2023-08-23T16:22:28+00:00","author":{"@id":"https:\/\/www.w3computing.com\/articles\/#\/schema\/person\/a550b3e20d78bb4f79b7c6b7b53f0561"},"description":"In this guide, we will explore advanced asynchronous JavaScript concepts, focusing on Promises, Async\/Await, and the Fetch API","breadcrumb":{"@id":"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.w3computing.com\/articles\/advanced-asynchronous-javascript-promises-async-await-fetch-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Articles Home","item":"https:\/\/www.w3computing.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Programming Languages","item":"https:\/\/www.w3computing.com\/articles\/programming-languages\/"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.w3computing.com\/articles\/programming-languages\/javascript\/"},{"@type":"ListItem","position":4,"name":"Advanced Asynchronous JavaScript: Promises, Async\/Await, and Fetch API"}]},{"@type":"WebSite","@id":"https:\/\/www.w3computing.com\/articles\/#website","url":"https:\/\/www.w3computing.com\/articles\/","name":"Developer Articles Hub","description":"","alternateName":"Developer Articles","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.w3computing.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.w3computing.com\/articles\/#\/schema\/person\/a550b3e20d78bb4f79b7c6b7b53f0561","name":"w3compadmin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.w3computing.com\/articles\/wp-content\/litespeed\/avatar\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266","url":"https:\/\/www.w3computing.com\/articles\/wp-content\/litespeed\/avatar\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266","contentUrl":"https:\/\/www.w3computing.com\/articles\/wp-content\/litespeed\/avatar\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266","caption":"w3compadmin"},"sameAs":["http:\/\/w3computing.com\/articles"]}]}},"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"w3compadmin","author_link":"https:\/\/www.w3computing.com\/articles\/author\/w3compadmin\/"},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts\/198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/comments?post=198"}],"version-history":[{"count":5,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts\/198\/revisions"}],"predecessor-version":[{"id":203,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts\/198\/revisions\/203"}],"wp:attachment":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/media?parent=198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/categories?post=198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/tags?post=198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}