如何确定承诺结果的优先级？

Question

I am working on a react app. I need to update the state with results from api request.Now the app functions such that I have to make api requests frequently. Therefore I set the state in then() once the results arrive. But some results take more time than others. So sometimes the result of the previous promise sets the state rather than the current. How do I prioritize the promises such that the latest request results sets the state. Or is there another way to get rid of the previous promises once I make a call to a new one?

this.state = {
      searchterm: '',
      isfocused: false,
      current: -1,
      noresults: false,
      // latest promise id
      reqseqid: 0,
      filteredList: []
    }


callingfunction(){
   let reqseqid = this.state.reqseqid + 1;
    this.setState({ 
      searchterm,
      filteredList: [],
      reqseqid
     });
    searchresults(searchterm, reqseqid)
      .then(res => {
        let { results, reqseqid } = res;
        console.log(reqseqid, this.state.reqseqid);
        if(reqseqid === this.state.reqseqid){
          if(res.length === 0){
            this.setState({ 
              current: -1,
              filteredList: [],
              noresults: true
             });
          }else{
            this.setState({ 
              current: -1,
              filteredList: results,
              noresults: false
            });
          }
        }

      });
}

Answer 1

The way I usually handle this is by having a instance property or similar variable that the asynchronous callback can check to see whether its results are still desired or the request is stale. For instance, in your constructor:

this.ajaxSequence = 0;

Then making your request:

const thisSequence = ++this.ajaxSequence;
doTheAjaxRequest()
    .then(result => {
        if (thisSequence == this.ajaxSequence) {
            // Use the result
        }
    })
    .catch(/*...probably check and ignore the error if this request was stale...*/);

It doesn't have to be a number. For instance:

this.currentRequestPromise = null;

then

const thisPromise = this.currentRequestPromise = doTheAjaxRequest()
    .then(result => {
        if (thisPromise == this.currentRequestPromise) {
            // Use the result
        }
    })
    .catch(/*...probably check here too...*/);

Answer 2

There are many ways of doing this. One way I prefer is to have an object instance (a requestSequence of sorts) that keep track of requests received, along with an incrementing index value for each. When a request/promise returns, check if the index of that request index is >= the largestIndex you've already returned from requestSequence . If it is, then return that result, and increment the largestIndex . Otherwise, don't return that value.

The benefit of this approach is that the caller of this code can issue requests as fast as it wants, and requestSequence will ensure order. The caller won't have to be concerned with expiring requests or checking if the returned value matches the current input.

Answer 3

You should take a look at observables for your execution flow. What you are looking for is flattening non concurrently a stream of promises which can be done pretty easily with a library such as xstream :

const xs = require("xstream").default;
const promise$ = ... // create a stream of promises
return promise$.map(p => xs.fromPromise(p)).flatten();

Creating a stream of promises is easy, assuming you need to fetch periodically you can have

const promise$ = xs.periodic(500).map(() => makeApiCall());

I would strongly advise you look in this direction. Trying to handle directly promises within you component lifecycle is not straightforward and should probably be done in a Redux middleware (or other state management utilities). For instance it requires you track the state of your component being mounted/unmounted inside your promise's callbacks, otherwise you might do operations on unmounted components. This could also lead to memory leaks.