What is the correct way to utilize $q's constructor syntax in conjunction with Angular's $http service's config.timeout feature?

Question

What is the correct way to utilize $q's constructor syntax in conjunction with Angular's $http service's config.timeout feature?

Now that the Promise is officially specified, I am looking to convert the promise creation in the snippet below from $q.defer() to using the

$q(function (resolve, reject) {})

constructor syntax. Can anyone help with this?

// To ensure only the most recent $http callback gets invoked,
// cancel any ongoing $http request
var canceller;
function getThing(id) {
  if (canceller) canceller.resolve();
  canceller = $q.defer();

  return $http.get('/api/things/' + id, {
    timeout: canceller.promise
  });
}

(For reference, according to $http docs, timeout is "… in milliseconds, or a promise that should abort the request when resolved.")

javascript angularjs angular-promise angular-http

Answer 1

Answer №1

My approach would be as follows:

let cancelFunction = null;
function fetchItem(itemId) {
  if (cancelFunction) cancelFunction();
  return Promise.resolve($http.get('/api/items/' + itemId, {
    timeout: new Promise(function(resolve) {
      cancelFunction = resolve;
    })
  }));
}

I assume you wouldn't have utilized cancelFunction.reject anyway, so it's better to hold onto the resolve function itself for future use.

Answer 2

My approach would be as follows:

let cancelFunction = null;
function fetchItem(itemId) {
  if (cancelFunction) cancelFunction();
  return Promise.resolve($http.get('/api/items/' + itemId, {
    timeout: new Promise(function(resolve) {
      cancelFunction = resolve;
    })
  }));
}

I assume you wouldn't have utilized cancelFunction.reject anyway, so it's better to hold onto the resolve function itself for future use.

What is the correct way to utilize $q's constructor syntax in conjunction with Angular's $http service's config.timeout feature?

Answer №1

Similar questions

Upon establishing a connection in Express JS, Socket.io will execute multiple times

Is there a one-liner to efficiently eliminate all instances of a specific sub-string from an array using the filter

Sharing data between app.js and client-side files in Node.js: How to do it effectively?

Angular date filter: Display month in the current time zone format

Help kids find solutions

Contrasting the lib and es directories

Enhancing the PreLoadMe script to cater to browsers that have JavaScript disabled

Updating the @mui/x-data-grid table dynamically upon fetching new data

Develop an Innovative Data-Driven Application using AJAX Technology

The issue arises due to conflicting indent configurations between eslint and @typescript-eslint/indent

Rails not receiving JSON data

The clear feature within Angular Material's AutoComplete component is causing a blockage for all the DOM elements

Implementing an ajax search functionality

Exploring Variable Naming in Angular with Dynamic Scope

JavaScript Variable Naming ConventionEnsuring correct spelling in variable names is essential

Mastering the art of reading arrays in Json with JavaScript

The functionality of V-model is hindered when implementing Bootstrap Tokenfield

`A dynamically captivating banner featuring animated visuals created with JQuery`

Tips for efficiently populating a MongoDB database for end-to-end testing

Comparing jQuery Elements