Fetch Promise 被 Chrome 的缓存阻塞

Question

我正在尝试使用 Fetch API 和 promises，并且我有以下对 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;
    })
};

当我尝试调用它时，响应只是 'Pending' 并且不会离开那里。奇怪的是，当我从开发控制台内部禁用缓存时，它解析得很好。正如您从代码片段中看到的那样，我尝试了很多方法来禁用调用本身的缓存，但是 none 它们什么都不做。

我什至在端点本身上尝试过老式缓存破坏，所以我完全不知所措！有什么想法吗？

编辑：事实证明，如果您等待足够长的时间（~40 秒），它最终会在启用缓存的情况下解决...不知道为什么缓存会导致它挂得如此严重？

Answer 1

所以我找到了一个解决方案，而且它实际上是在后端，而且似乎与Cache没有什么关系。

我正在使用 Python/Flask 作为路由器，并且通过允许线程 (app.run(debug=True, threaded=True, port=5000))，问题就消失了。我不知道为什么会这样，但你知道了。

我实际上咬了一个重现问题的最小烧瓶应用程序。它只需要 python 3 和 Flask 到运行。它在 github here 上，但这是代码：

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>

很难相信如此标准的东西竟然行不通！

Fetch Promise 被 Chrome 的缓存阻塞

Fetch Promise gets blocked by Chrome's Cache

javascript

google-chrome

promise

reactjs

fetch-api