如何将值传递给 AngularJS $http 成功回调答案

【问题标题】：How to pass a value to an AngularJS $http success callback如何将值传递给 AngularJS $http 成功回调
【发布时间】：2013-10-07 15:36:04
【问题描述】：

在我的 AngularJS 应用程序中，我正在执行以下操作

$http.get('/plugin/' + key + '/js').success(function (data) {
    if (data.length > 0) {
        console.log(data);
        // Here I would also need the value of 'key'
    }
});

现在我需要在成功回调中访问key 值，即我需要知道在发出get() 请求时它具有哪个值。

任何“最佳实践”如何做到这一点？

PS：我可以做到以下几点，但有更好的方法吗？

var key = config.url.split('/')[2];

【问题讨论】：

你试过直接访问吗？它将可用，请尝试console.log(key)
是的，这不起作用，而且该回调是异步的，因此键的值可能在调用时已经更改。
@TeamAIGD -- 您绝对应该可以在回调中访问key，如果key 将发生如此大的变化，请在调用之前将key 分配给不同的变量，然后在回调中使用该变量。

标签： javascript angularjs callback

【解决方案1】：

解决方案 1：

$scope.key = key;
$http.get('/plugin/' + key + '/js').success(function (data) {
    if (data.length > 0) {
        console.log(data, $scope.key);
    }
});

解决方案 2（根据 Jim Hong 在回答中的观察更新）：

$http.get('/plugin/' + key + '/js').success((function(key) {
    return function(data) {
        console.log(key, data);
    }
})(key));

【讨论】：

第二种解决方案适用于带有回调的迭代。我用它来做这个： for(var i = 0; i
第二种解决方案对我有用。我已经对其进行了编辑，以将 Jim Hong 在下面的回答中提到的更正纳入其中。
.success 已弃用。使用 then 代替

【解决方案2】：

参考@geniuscarrier 我这边的工作解决方案是

$http.get('/plugin/' + key + '/js').success((function(key) {
    return function(data) {
        console.log(key, data);
    }
})(key));

自从使用@geniuscarrier，我会得到

数据未定义错误

.

【讨论】：

好点。我已经编辑了@geniuscarrier 的答案以更正它 - 给想知道您的答案和geniuscarrier 的第二个解决方案有什么不同的读者的说明。他们现在是一样的。

【解决方案3】：

从技术上讲，这不是 AngularJS 的问题，而是 javascript

的一个特性

首先，您在作用域中定义的函数将可以访问局部变量和参数其父范围

function parent(arg){
   var local
   function child(){
       // have access to arg and local
   }
}

Scope 实际上适用于父子类比：如果您是父母并且您拥有一个 cookie，那么您当然愿意与您的孩子分享它......但如果您是一个孩子...你的 cookie 是你的 cookie，你的父母不能碰它 :)。换句话说，内部作用域可以访问外部作用域，但它不能双向工作

所以你肯定可以做到：

$http.get('/plugin/' + key + '/js').success(function (data) {
    if (data.length > 0) {
        console.log(data, key); //as long as you can pass it to $http.get as an argument
                                //you can access it here
    }
});

其次，由于 javascript 的事件驱动特性， inner function store references to the outer function’s variables。你可能听说过这个

javascript 中的函数是对象

因此，局部变量和参数是函数的私有成员：

function ObjectA(){ // define a constructor
    var x = 10      // private variable
    changeX : function(){
                  x = 20   // access and MODIFY a variable of parent scope
              }
}

如果你能理解私有变量在javascript中是如何工作的，那么你就基本理解了闭包是什么。因此，对于回调函数，很可能在它被触发时，父范围变量的值已经改变了。要解决此问题，您可以使用立即调用函数表达式 (IIFE)

$http.get('/plugin/' + key + '/js').success((function(currentKeyValue) {
    return function(data) {
        console.log(currentKeyValue, data);
        // again, currentKeyValue is a REFERENCE to outer function's
        // parameter. However, since String is passed by value in javascript
        // currentKeyValue of outer scope is a DIFFERENT string that has the
        // same value as KEY when it is invoked
    }
})(key)); // immediately invoke the function passing the key as a parameter

【讨论】：

【解决方案4】：

除了污染作用域或使iif复杂化之外，另一种更简洁的方法是创建一个回调函数并带参数调用它；

var myCallBack = function (key) {
  return function (data) {
    if (data.length > 0) {
      console.log(data, key);
    }
  }
}

$http.get('/plugin/' + key + '/js').success(myCallBack(key));

【讨论】：

【解决方案5】：

唷，我一直在寻找这个答案，但它在这里很好。只是为了更新它，因为旧的 promise 方法 success 和 error 已被弃用，我们应该改用标准的 then 方法。

@geniuscarrier 和 @jim-horng 答案中的解决方案 2 可以这样重写：

$http.get('/plugin/' + key + '/js').then(
    (function(key) {
        return function(data) {
            console.log(key, data);
        }
    })(key),
    function(data) {
        //error handle
    });

【讨论】：