javascript - HTTP 调用由于另一个方法调用而被取消，如何强制阻止第二次调用，直到收到 HTTP 响应？

Question

我正在为 oauth2 进行授权代码流程，我在这里做错了一些事情，但我无法真正检测到..

这是我的代码

在 app.js 中

myService.setup().then(function(){...

在service.js中

var service = {
  setup(options) {
    this.processData();
    return this.getToken(options);
  },  

  processData(data) {
    let response = this._extractURLParams(window.location.href)
    if (response.hasOwnProperty("code")) {
      return this.handleAuthorizationCode(responseResult);
  },

  handleAuthorization(codeObject) {
  var service= this;
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", /token, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    var params = 'grant_type=authorization_code&code=' + codeObject.code + '&client_id=client_id&client_secret=secret&redirect_uri=' + codeObject.redirectURi;

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var responseData = JSON.parse(this.response);
        resolve(service.storeToken(responseData));
      }
    };
    xhr.send(params);
  });
},

getToken(options) {
    let service = this;
    return new Promise(function (resolve, reject) {
   if(// localStorage has a token) {
     resolve(localStorage.getToken()) //dummy text, real code here
   } else {
      resolve(service.handleRedirectionsFlow(options));
      })
  },

发生的情况如下

1) 当我访问我的应用程序时，我调用 myService.setup()

2) setup() 方法将调用 processData()，由于 url 将为空，因此 if 条件不会通过，因此我们将调用 getToken()

3) getToken() 将调用一个方法，该方法将构建一个 url 并更改其位置，以便我们通过授权服务器上的表单进行身份验证，然后在使用代码进行身份验证后重定向回应用程序!

4) 身份验证后，我们将重定向到应用程序，如下所示 'url?code=abcasdasdsfdasifsfsfs

5) 现在，processData() 将检测到 url 具有 code 属性，我们将调用handleAuthorizationCode

6)handleAuthorizationCode将简单地执行一个post请求来获取 token ，并且在onReadyStateChange上我们将调用另一个方法来存储 token 。

7) 现在，当我们从 setup() 调用 getToken() 时，此时 onreadystatechange 尚未从之前的方法中触发，导致我们重做重定向以再次进行身份验证，然后 token 请求被取消，我们从不存储它..

有人可以帮我知道我应该在哪里放置额外的 promise 并解决它，以便在触发 onreadystatechange 并存储 token 以避免无限循环后调用 getToken() 吗？

谢谢

Answer 1

如果无法运行就很难知道，但是这个怎么样？

var service = {
    setup(options) {
        return this.processData()
            .then(token => token || this.getToken(options));
    },

    processData(data) {
        const response = this._extractURLParams(window.location.href);
        return response.hasOwnProperty("code")
            ? this.handleAuthorizationCode(responseResult)
            : Promise.resolve();
    },

    handleAuthorization(codeObject) {
        var service = this;
        return new Promise((resolve, reject) => {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", /token, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            var params = 'grant_type=authorization_code&code=' + codeObject.code + '&client_id=client_id&client_secret=secret&redirect_uri=' + codeObject.redirectURi;

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var responseData = JSON.parse(this.response);
                    resolve(service.storeToken(responseData));
                }
            };
            xhr.send(params);
        });
    },

    getToken(options) {
        let service = this;
        return new Promise(function(resolve, reject) {
            if (localStorageHasToken) {
                resolve(localStorage.getToken()) //dummy text, real code here
            } else {
                resolve(service.handleRedirectionsFlow(options));
            }
        });
    }
};

本质上，我们让 processData 始终返回一个 Promise，即使它是一个立即解析的 Promise，并且在 setup 中我们等待 processData() Promise在调用 getToken 之前解决。

我不确定 service.storeToken(responseData) 返回什么，但如果 token 已存储，您可能可以使用它完全跳过调用 getToken 。