Javascript 承诺等待 AccessToken 值

Question

我在理解值方面遇到了很大的问题，我得到了使用访问令牌获取数组的函数，我将此令牌传递给 ajax url 以获取 json 数据。我知道我需要在获得访问令牌后使用那里的承诺来运行 ajax。你能帮我做这个吗？

componentDidMount: function () {
    var component = this;
    var accessToken = getAccessToken();
    $.ajax({
        type: 'GET',
        url: window.APIUrl +'services/?access_token=' + accessToken,
        dataType: 'json',
        success: function(response)
        {
            component.setState({
                services : response
            });
        }
    });
}

function getAccessToken(){
var client_id = '****',
    client_key = '****',
    $ = jQuery;
if(!window.accessToken){
    $.ajax({
        url : APIUrl + 'auth',
        method : 'post',
        data : {
            'id' : client_id,
            'key' : client_key
        },
        success: function(response){
            if(typeof response.access_token != 'undefined'){
                /*console.log(response);*/
                window.accessToken = response.access_token;
                return response.access_token;
            }else{
                return false;
            }
        }
    });
}else{
    return window.accessToken;
}

}

Answer 1

让你的函数getAccessToken返回一个承诺

componentDidMount: function () {
    var component = this;
    getAccessToken()
       .then(function(accessToken) {
          var url = window.APIUrl +'services/?access_token=' + accessToken,
          return $.getJSON(url)
       })
       .then(function(response) {
         component.setState({
            services: response
       });
    });
}

function getAccessToken(){
   if(window.accessToken) {
      return $.when(window.accessToken)
   }

   return $.ajax(...) // get access token from server
}

Answer 2

试试这样的

componentDidMount: function () {
  var component = this;
  getAccessToken().then(function(accessToken) {
    $.ajax({
        type: 'GET',
        url: window.APIUrl +'services/?access_token=' + accessToken,
        dataType: 'json',
        success: function(response)
        {
            component.setState({ services : response });
        }
    });
  })
}

function getAccessToken(){
  var deferred = $.Deferred()

  var client_id = '****',
      client_key = '****',
      $ = jQuery;

  if(!window.accessToken){
    $.ajax({
        url : APIUrl + 'auth',
        method : 'post',
        data : {
            'id' : client_id,
            'key' : client_key
        },
        success: function(response){
            if(typeof response.access_token != 'undefined'){
              /*console.log(response);*/
              window.accessToken = response.access_token;
              deferred.resolve(window.accessToken)
            } else {
              deferred.reject()
            }
        }
    });
  } else {
    deferred.resolve(window.accessToken)
  }

  return deferred.promise()
}