14

Quando eu uso

 $http.get('/products').then((response) => {
   this.products = response.data;
   this.allProducts = response.data;
 });

a página é carregada com os produtos no Google Chrome, mas quando eu uso

$http.get('/products').then(function(response) {
  this.products = response.data;
  this.allProducts = response.data;
});

Os produtos não são carregados :(

Por causa do Safari e Safari Mobile, eu não estou conseguindo usar a sintaxe () => do ES2015. O navegador dá um erro de "compilação".

Alguém sabe o que eu preciso fazer para utilizar o function(response) {} e obter os produtos?

Obrigado

3
  • Aparece algum erro no console, a requisição é feita? Commented 29/07/2016 às 14:41
  • a requisição é feita sim. Quando eu dou um console.log(response.data) ele me devolve o array de produtos certinho. Mas aparece um erro : TypeError: Cannot set property 'products' of undefined Commented 29/07/2016 às 14:43
  • Tenta inicializar a lista de produtos, products = []; no escopo global Commented 29/07/2016 às 14:46

3 Respostas 3

22

Como notei que não explicaram a diferença entre () => {} e function() {}, então apesar de haver uma resposta marcada como correta, vou explicar esta diferença.

Primeiramente é muito comum achar que ambos os códigos são equivalentes, já que o ES6 trouxe diversos syntax sugar para deixar o código mais legível e conciso, as arrow functions são normalmente confundidas com as functions do ES5. Mas indo direto ao ponto existem cinco diferenças entre ambos os códigos:

Contexto

Arrow functions possuem this léxico enquanto o modelo normal possui this dinâmico. Isso significa que arrow functions herdam o contexto local de onde foi declarado, enquanto o modelo normal possui o contexto associado ao objeto que ele está vinculado no momento da chamada (se ele não estiver associado a ninguém na chamada, ele assumirá this automaticamente como o contexto global, que no caso dos navegadores é window)

var normal = function() {
  return this === obj;
};

var arrow = () => {
  return this === window;
};

var obj = { normal: normal, arrow: arrow };

obj.normal(); // true
obj.arrow(); // true

normal(); // false

Constructor

Arrow functions não podem ser constructors, então não é possível usar o operador new com a mesma.

var Normal = function() {};
var Arrow = () => {};

new Normal(); // Normal {}
new Arrow(); // Arrow is not a constructor

Arguments

Arrow functions não possui o objeto array-like arguments.

var noop = () => {
  return arguments;
}

noop(); // ReferenceError: arguments is not defined

Nome de função

Expressões de função podem ser nomeadas explicatamente, isso é útil em alguns cenários que envolvem recursão e para em casos de exceção fica mais fácil de rastrear o código, visto que o nome da função é usado na pilha de exceção mostrada ao desenvolvedor. Só que Arrows Functions não podem ser nomeadas explicitamente, elas acabam herdando o nome da variável onde foi criada.

var fn = function nome() {};
fn.name; // nome

var fn = () => {};
fn.name; // fn

Retorno

Expressões de função precisam declarar explicitamente qual será o retorno da função, enquanto Arrow Functions permitem escrever em um modelo encurtado onde a última expressão analisada será o retorno da função quando é omitido as chaves {}.

var fn = function() { return 1; }; // retorna 1

var fn = () => 1; // retorna 1
var fn = () => (1, 2, 3); // retorna 3, última expressão avaliada

var fn = () => { 1 }; // retorna undefined
var fn = () => { return 1 }; // retorna 1

O que seria um modelo equivalente de () => {} então?

Ignorando o caso de que arrow functions não podem ser usadas como constructors e não recebem arguments, o modelo mais equivalente entre arrow functions e funções tradicionais seria este:

// modelo nomeado
var name = (() => { /* code */ })
var name = (function name() { /* code */ }).bind(this)

// modelo anônimo
(() => { /* code */ })
(function() { /* code */ }).bind(this)

Neste caso o code pode ser exatamente o mesmo entre os dois modelos e eles irão funcionar exatamente igual. Mas claro, existem outras maneiras de simular o comportamento das arrow functions. Um deles é armazenar o contexto this em uma variável e usar essa variável na função tradicional em vez do seu próprio this, o que as outras respostas mostraram.

6
  • 1
    Bem colocado! Foquei no texto da questão e esqueci do título. Commented 2/08/2016 às 11:29
  • 1
    Boa resposta! Acho interessante mencionar a syntax sugar do return com arrow function. Exemplo function (test) { return test } pode ser escrito apenas com test => test. O que acha de adicionar um exemplo a resposta? Commented 18/01/2017 às 13:44
  • Bom ponto levantado, @DorivalZanetto. Também preciso atualizar a parte de Nome de função, visto que Arrow functions agora recebem por padrão o nome da variável onde foi declarado na propriedade name. Commented 18/01/2017 às 14:56
  • Bacana @GabrielKatakura. Fiz uma pergunta voltada a perda de referências em funções que apenas consegui resolver com arrow functions. O que acha de tentar elaborar uma resposta? pt.stackoverflow.com/questions/178215/… Commented 18/01/2017 às 15:48
  • 1
    Obrigado, tinha alterado uma rotina para uso de arrow functions e meu código parou. Acho que deixei passar despercebido que o contexto muda. Sua explicação foi de grande ajuda para firmar o conhecimento!
    – user77310
    Commented 2/12/2022 às 13:46
7

Posso estar enganado, mas li um artigo de AngularJs (não estou achando a referência agora) que tratava essa questão em específica quando combinada com o uso do método syntax as, onde é comum usar this dentro do controller.

O grande problema quanto a isso é saber a qual escopo o this está atribuído, pois para que seja possível passar os dados para a view, é necessário que o mesmo esteja no escopo do controller.

É aí que acredito que esteja o seu erro, pois o this está no escopo do $http

.controller('myCtrl', function($scope, $http) {
    this.products = []; //Aqui ele está no escopo do controller - Irá passar para view

    $http.get('minha/url/aqui').then(function(response){
        this.products = response.data; //Aqui ele está no escopo do $http - Não irá passar para view
    })
})

O que normalmente é feito, para garantir que você sempre use o escopo do controller quando atribuído ao this, é criar uma variável no início do controller e usá-la, ao invés de usar this. Assim:

.controller('myCtrl', function($scope, $http) {
    var vm = this; //Pode ser vm (ViewModel) ou outra variável de sua preferência

    vm.products = []; //Aqui ele está no escopo do controller - Irá passar para view

    $http.get('minha/url/aqui').then(function(response){
        vm.products = response.data; //Está apenas atualizando o products definido anteriormente
    })
})
1
  • Ótima resposta. Uma outra alternativa se não for usar a lista na view é não usar o this. Commented 29/07/2016 às 14:58
0

Faço assim e funciona:

angular.module('myApp', []);

angular.module('myApp')
.controller('myCtrl', function($scope, $http) {

    $scope.content = [];

    $http.get("/content")
    .then(function(response) {
        $scope.content = response.data;
    });

});

Retirado e baseado de: Angular HTTP W3Schools

2
  • Eu precisava que a variável products fosse do controller e não $scope. Commented 29/07/2016 às 14:45
  • Só sei fazer assim como a documentação do W3Schools e do próprio Angular fazem. :-(
    – Shura16
    Commented 29/07/2016 às 14:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .