CODEWITHSUNDEEP
javascriptreactjsgoogle-chromepromisefetch-api
Nick Williams
Nick Williams

Reputation: 31

Fetch Promise gets blocked by Chrome's Cache

I'm trying to use the Fetch API with promises, and I have the following call to an API.

export const refreshTokenAPI = () => {
  return fetch('/api/auth/gettoken/' ,{
    cache: 'no-store',
    headers: {
      'Authorization': 'Basic '+ btoa(getToken() + ':'),
      'pragma': 'no-cache',
      'cache-control': 'no-cache'
   }
  })
    .then(response => {
      return handle_response(response)
    })
    .catch(error => {
      throw error;
    })
};

When I try to call this, the response just sits as 'Pending' and doesn't go anywhere from there. The weird thing is that when I disable the cache from inside the dev console, it resolves just fine. As you can see from the snippet, I've tried a bunch of things to disable the cache from the call itself, but none of them do anything.

I've even tried old-school cache busting on the endpoint itself, so I'm completely at a loss! Any thoughts?

EDIT: It turns out that if you wait for long enough (~40seconds), it does eventually resolve with the cache enabled... no idea why the cache would cause it to hang so badly?

Upvotes: 2

Views: 845

Answers (1)

Nick Williams
Nick Williams

Reputation: 31

So I found a solution, and it's actually on the backend, and appears to have little to do with the Cache.

I'm using Python/Flask as the router, and by allowing threading (app.run(debug=True, threaded=True, port=5000)), the problem goes away. I have no idea why this would be the case, but there you have it.

I actually bit a minimal flask application that reproduces the problem. It only requires python 3 and Flask to run. It's on github here, but here's the code:

Application.py:

from flask import Flask, render_template, jsonify

application = Flask(__name__)


@application.route('/')
def index():
    return render_template('index.html')

@application.route('/foo/', methods = ['GET'])
def get_foo():
    return jsonify({'message': 'bar'}), 200

if __name__ == '__main__':
    # application.run(threaded = True) # This works
    application.run()                # This doesn't

/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body>
Loaded...
</body>

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  console.log('document ready');

  fetch('/foo/').then(function(response) {
    console.log('then triggered');
    return response.json();
  }).then(function(json) {
   console.log(json)
  });
});
</script>

</html>

Hard to believe that something so standard could not work!

Upvotes: 1

Related Questions