Merge pull request #187 from jamesplease/race-condition-fix

Race condition fix

Author: jamesplease

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+### v3.1.1 (2018/7/10)
+
+**Bug Fixes**
+
+- A race condition has been fixed.
+
 ### v3.1.0 (2018/7/10)
 
 **New Features**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-request",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Declarative HTTP requests with React.",
   "main": "lib/index.js",
   "module": "es/index.js",

src/fetch.js

@@ -136,7 +136,7 @@ export class Fetch extends React.Component {
   // When a request is already in flight, and a new one is
   // configured, then we need to "cancel" the previous one.
   cancelExistingRequest = reason => {
-    if (this.state.fetching && !this.hasHandledNetworkResponse) {
+    if (this.state.fetching && this._currentRequestKey !== null) {
       const abortError = new Error(reason);
       // This is an effort to mimic the error that is created when a
       // fetch is actually aborted using the AbortController API.
@@ -214,6 +214,8 @@ export class Fetch extends React.Component {
     const requestKey = this.getRequestKey(options);
     const requestOptions = Object.assign({}, this.props, options);
 
+    this._currentRequestKey = requestKey;
+
     const {
       url,
       body,
@@ -261,8 +263,6 @@ export class Fetch extends React.Component {
     // cancel the in-flight request.
     this.responseReceivedInfo = responseReceivedInfo;
 
-    this.hasHandledNetworkResponse = false;
-
     const fetchPolicy = this.getFetchPolicy();
 
     let cachedResponse;
@@ -315,7 +315,7 @@ export class Fetch extends React.Component {
           responseCache[requestKey] = res;
         }
 
-        if (!this.hasHandledNetworkResponse) {
+        if (this._currentRequestKey === requestKey) {
           this.onResponseReceived({
             ...responseReceivedInfo,
             response: res,
@@ -327,7 +327,7 @@ export class Fetch extends React.Component {
         return res;
       },
       error => {
-        if (!this.hasHandledNetworkResponse) {
+        if (this._currentRequestKey === requestKey) {
           this.onResponseReceived({
             ...responseReceivedInfo,
             error,
@@ -358,7 +358,7 @@ export class Fetch extends React.Component {
     this.responseReceivedInfo = null;
 
     if (!stillFetching) {
-      this.hasHandledNetworkResponse = true;
+      this._currentRequestKey = null;
     }
 
     let data;