Asynchronous Programming with Promises and Async/Await

Asynchronous programming is an important concept in JavaScript, as it allows you to perform long-running tasks without blocking the main thread of execution. In this article, we’ll go over the basics of asynchronous programming in JavaScript, and how to use promises and the async/await syntax to make it easier to work with asynchronous code.

What is Asynchronous Programming?

Asynchronous programming is a programming paradigm in which a program can perform multiple tasks concurrently, rather than sequentially. This allows a program to perform multiple tasks simultaneously, without having to wait for one task to complete before starting another.

In JavaScript, asynchronous programming is often used when working with I/O operations, such as reading or writing to a file, or making an HTTP request to a server. These types of operations can take a long time to complete, and blocking the main thread of execution while they are running can lead to a poor user experience. By using asynchronous programming, you can perform these tasks concurrently, without blocking the main thread of execution.

Callbacks

One of the earliest approaches to asynchronous programming in JavaScript was to use callback functions. A callback function is a function that is passed as an argument to another function, and is called when the task that the function performs has completed.

Here’s an example of how to use a callback function to make an HTTP request:

function makeRequest(url, callback) {
  // Make the request
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.onload = function() {
    callback(xhr.responseText);
  };
  xhr.send();
}

// Use the callback function
makeRequest("http://example.com", function(response) {
  console.log(response);
});

While callback functions are effective at handling asynchronous tasks, they can lead to what is known as “callback hell” if you have multiple asynchronous tasks that depend on each other. This can result in a deep nesting of callback functions, which can be difficult to read and maintain.

Promises

To address the issue of “callback hell,” JavaScript introduced promises in ECMAScript 2015 (ES6). A promise is an object that represents the result of an asynchronous operation. A promise can be in one of three states:

• Pending: The promise has not yet been fulfilled or rejected.
• Fulfilled: The promise has been fulfilled, and the asynchronous operation was successful.
• Rejected: The promise has been rejected, and the asynchronous operation failed.

Promises provide a more declarative and readable way to handle asynchronous operations. Instead of using callback functions, you can use the then and catch methods of a promise to specify what should happen when the promise is fulfilled or rejected.

Here’s an example of how to use a promise to make an HTTP request:

function makeRequest(url) {
  return new Promise(function(resolve, reject) {
    // Make the request
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.send();
  });
}

// Use the then and catch methods
makeRequest("http://example.com")
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.error(error);
  });

async/await

The async/await syntax is a newer addition to JavaScript that makes it even easier to work with asynchronous code. The async keyword is used to declare an asynchronous function, and the await keyword is used to wait for a promise to be fulfilled or rejected before continuing execution.

Here’s an example of how to use the async/await syntax to make an HTTP request:

async function makeRequest(url) {
  // Make the request
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.onload = function() {
    if (xhr.status === 200) {
      return xhr.responseText;
    } else {
      throw new Error(xhr.statusText);
    }
  };
  xhr.send();
}

// Use the await keyword
try {
  var response = await makeRequest("http://example.com");
  console.log(response);
} catch (error) {
  console.error(error);
}

Using the async/await syntax makes asynchronous code feel more like synchronous code, which can make it easier to read and understand.

Conclusion

In this article, we’ve covered the basics of asynchronous programming in JavaScript, and how to use promises and the async/await syntax to make it easier to work with asynchronous code. By understanding how to work with asynchronous programming, you’ll have the skills you need to create efficient and effective JavaScript applications that can handle long-running tasks without blocking the main thread of execution.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

function getJSON(url) {
  return new Promise(function(resolve, reject) {
    // Make the request
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.send();
  });
}

getJSON("http://example.com/data.json")
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

async function getJSON(url) {
  // Make the request
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.onload = function() {
    if (xhr.status === 200) {
      return JSON.parse(xhr.responseText);
    } else {
      throw new Error(xhr.statusText);
    }
  };
  xhr.send();
}

try {
  var data = await getJSON("http://example.com/data.json");
  console.log(data);
} catch (error) {
  console.error(error);
}

function getFile(url) {
  return new Promise(function(resolve, reject) {
    // Make the request
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.send();
  });
}

getFile("http://example.com/file.txt")
  .then(function(file) {
    var reader = new FileReader();
    reader.onload = function() {
      console.log(reader.result);
    };
    reader.readAsText(file);
  })
  .catch(function(error) {
    console.error(error);
  });

async function getFile(url) {
  // Make the request
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.onload = function() {
    if (xhr.status === 200) {
      return xhr.response;
    } else {
      throw new Error(xhr.statusText);
    }
  };
  xhr.send();
}

try {
  var file = await getFile("http://example.com/file.txt");
  var reader = new FileReader();
  reader.onload = function() {
    console.log(reader.result);
  };
  reader.readAsText(file);
} catch (error) {
  console.error(error);
}

function getJSON(url) {
  return new Promise(function(resolve, reject) {
    // Make the request
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.send();
  });
}

getJSON("http://example.com/data.json")
  .then(function(data) {
    return data.map(function(item) {
      return {name: item.name};
    });
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });