This paper will use a specific case to introduce how to build a model to coordinate complex race conditions in front-end development

Introduction to race conditions

  • Race hazard is also known as race condition. Designed to describe the output of a system or process exhibiting unpredictable, fatal dependencies on the relative chronological order of events.
  • Common cases of coordinating race conditions resolve race conditions when using promises

Complex problem scenario

The demo address

Function description

  • Show the difference on the mapAggregate levelBusiness data.
  • Map level is divided into1 ~ 20Level, the larger the level value, the smaller the current map scale.
  • Different levels of maps show different levels of aggregated data, such asLevel 1 ~ 6Show according to theAdministrative provinceAggregated data,7 ~ 12 levelShow according to theAdministrative cityAggregated data,13 ~ 20showAdministrative districtsAggregated data.
  • The user choosesThematic layer, request the aggregation data of the corresponding aggregation level according to the aggregation level of the current map, and render in the map.
  • To obtainAdministrative province.Administrative cityLevel of aggregated data, plusData update timeTo obtain the query conditionsAdministrative districtsLevel aggregated data is added in additioncityFilter conditions.
  • If the user needs to display the data when zooming in and out of the mapAggregate levelChanges will load the corresponding data and render.

Analysis of race conditions

  • The user selects oneThematic layerAfter, data acquisition is triggered. For example, the current map level isLevel 6, should be asynchronously retrieved according toAdministrative provinceLevel aggregated data. If obtained according toAdministrative provinceThe user switches to the map before the request for level aggregation data is responded toLevel 7, should be asked to pressAdministrative cityLevel aggregated data. If the user stays on the mapLevel 7, obtain the followingAdministrative provinceThe request for level aggregation data was responded to. This data should not be rendered in the interface.

Detail function point

  • The user selects oneThematic layerAfter, data acquisition is triggered. For example, the current map level isLevel 6, should be asynchronously retrieved according toAdministrative provinceLevel aggregated data. If obtained according toAdministrative provinceThe user switches to the map before the request for level aggregation data is responded toLevel 7“And cut back to the mapLevel 6Nor should repeated requests followAdministrative provinceAggregated data.
  • When the user unselected oneThematic layerGets thisThematic layerRequests for data that are still pending should be cancelled.

thinking

  • The request condition for an asynchronous request is indeterminate
  • For example, request thatAdministrative provinceLevel of aggregated data when the query field may be
{
 keyWord,// Layer name
 time,
 adminLevel,// Aggregation mode
}
Copy the code
  • The request in accordance with theAdministrative cityLevel of aggregated data when the query field may be
{
 keyWord,
 time,
 adminLevel,
 city, / / the city
}
Copy the code
  • The number of asynchronous requests in a pengding state at any one time is uncertain
  • If an asynchronous request is responded to, but the current state of the interface is different from the state used to trigger the request, the data should not be discarded. Otherwise the user is in the mapLevel 6andLevel 7When switching back and forth, the map may never render data.
  • So you can’t simply coordinate race conditions in this way
ArticleStore.fetch(id).then((article) = > {
  // Check the application status:
  if (this.props.articleID ! == id)return;

  this.setState({
    title: article.title,
    body: article.body
  });
});
Copy the code

Build a model

The specific implementation

  • Implementation of data cache

data-cacher

  • Function function logic extraction
/** * applyGetCoverageData - Request the corresponding map data, using the scene time, layer, map zoom, map instance change; * getCoverageData - Get the data currently needed; * needRequestValidate - Determines whether the request getCoverageData function call needs to be initiated; * getCoverageRequestParams- Constructs the parameters for the request (query); * clearonecoveragDatamodel-cancel is called when a request is still pending, either before the layer is removed or when the layer data is fully initialized; * initOneCoveragDataModel - Initializes the data model * coverageDataSave - stores the data returned by the interface locally and calls it when the data request responds * applyPrepareRenderData - Prepares the data for rendering * * /
Copy the code
  • Function implementation source code
  • Implementation effect