Pnpjs: Create a abort/cancel request method

Created on 10 Jan 2020 · 2Comments · Source: pnp/pnpjs

Question

Is possible enable abort/cancel on the requests?. Why i need this? Example: i have a search button, and onChange i need to do a new request as this: sp.web.lists.getByTitle("...").items.filter("substringof('proposal',Title"))

But so if you write "Proposal" i'll be doing 8 request (one request for each letter), so i need abort/cancel the firsts requests. I know that my example is possible solve with other technique in the clientside, but i believe that to do optimal components is necesary to have this feacture.

I imagine for my example some as this

//onChange method
mySearchMethod(newValue){   
    this.request.abort();
    this.request = sp.web.lists.getByTitle("...").items.filter("substringof('"+newValue+"',Title")).request();
    this.request.get().then(()=>{...})
}

Thanks you

non-library question

Source

jaguil3ra

Most helpful comment

Promises can't be aborted. But you can implement a simple debounce logic on the control side and only send the next request after a short timeout if no additional character was typed in.

Something this way https://www.npmjs.com/package/debounce-promise or [shameless copy from Stack Overflow, which shows the idea]:

function debounce(inner, ms = 0) {
  let timer = null;
  let resolves = [];

  return function (...args) {    
    // Run the function after a certain amount of time
    clearTimeout(timer);
    timer = setTimeout(() => {
      // Get the result of the inner function, then apply it to the resolve function of
      // each promise that has been created since the last time the inner function was run
      let result = inner(...args);
      resolves.forEach(r => r(result));
      resolves = [];
    }, ms);

    return new Promise(r => resolves.push(r));
  };
}

koltyakov on 10 Jan 2020

👍2

All 2 comments

Promises can't be aborted. But you can implement a simple debounce logic on the control side and only send the next request after a short timeout if no additional character was typed in.

Something this way https://www.npmjs.com/package/debounce-promise or [shameless copy from Stack Overflow, which shows the idea]:

function debounce(inner, ms = 0) {
  let timer = null;
  let resolves = [];

  return function (...args) {    
    // Run the function after a certain amount of time
    clearTimeout(timer);
    timer = setTimeout(() => {
      // Get the result of the inner function, then apply it to the resolve function of
      // each promise that has been created since the last time the inner function was run
      let result = inner(...args);
      resolves.forEach(r => r(result));
      resolves = [];
    }, ms);

    return new Promise(r => resolves.push(r));
  };
}

koltyakov on 10 Jan 2020

👍2

It would be a less than ideal design to do a request for each letter, I like @koltyakov's solution above. As we don't have a way to abort these requests I am closing the issue. Should you need to discuss further please open a new issue and ref this one. Thanks!