Angular 2 - Cadastro de Clientes - X

 Neste artigo vou mostrar como criar um cadastro de clientes e fazer o CRUD usando o Angular 2 e o Visual Studio Code.

Neste artigo (veja o artigo anterior aqui) vamos mostrar como fazer chamadas assíncronas usando Promise.

O que é um Promise ? (retirado do site: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise)

Promise é um objeto usado para processamento assíncrono. Um Promise ("promessa") representa um valor que pode estar disponível agora, no futuro ou nunca.

Sintaxe :   new Promise(/* executor */ function(resolve, reject) { ... });

Parâmetros

executor
Uma função que recebe dois argumentos resolve and reject. Esta função é executada imediatamente pela implementação do Promise, passando as funções resolve e reject.
O executor é chamado antes que o construtor Promise retorne o objeto criado.  

As funções resolve e reject, quando chamadas, resolvem (em caso de sucesso) ou rejeitam (quando ocorre um erro) a promessa, respectivamente. 
O executor começa o trabalho assíncrono que, quando concluído, chama uma das funções resolve ou reject para definir o estado da promessa.

Um Promise representa um proxy para um valor que não é necessariamente conhecido quando a promessa é criada. Isso permite a associação de métodos de tratamento para eventos da ação assíncrona num caso eventual de sucesso ou de falha. Isto permite que métodos assíncronos retornem valores como métodos síncronos: ao invés do valor final, o método assíncrono retorna uma promessa ao valor em algum momento no futuro.

Um Promise está em um dos seguintes estados: 

Se observarmos o código do arquivo cliente.service.ts veremos que estamos retornando de forma síncrona uma lista de clientes:

import { Injectable } from '@angular/core';
import { Cliente } from './cliente.model';
import { CLIENTES } from './clientes-mock';
@Injectable()
export class ClienteService{
    getClientes() : Cliente[]  {
        return CLIENTES;
    }
}

Isso é conveniente para o exemplo usado, pois estamos definindo um array de clientes localmente. Mas no futuro iremos precisar fazer a chamada para retornar a lista de clientes de um servidor remoto.

Não podemos fazer isso usando uma chamada síncrona pois a interface do usuário ficaria bloqueada esperando pela resposta. Para isso usamos Promise.

Vamos alterar o código do arquivo cliente.service.ts conforme abaixo:

import { Injectable } from '@angular/core';
import { Cliente } from './cliente.model';
import { CLIENTES } from './clientes-mock';
@Injectable()
export class ClienteService{
    getClientes() : Promise<Cliente[]>  {
        return Promise.resolve(CLIENTES);
    }
}

Agora no método GetClientes() retorna uma Promise contendo uma lista de clientes(Cliente[]); Para retornar a lista de clientes usamos a função resolve que esta resolvendo e retornando de imediato a lista de clientes. (Neste código estamos devolvendo uma Promise imediatamente resolvida, ou seja, é como se o servidor tivesse uma resposta instantânea)

Agora para que isso funcione temos que ter a contrapartida alterando o arquivo clientes-lista.component.ts para trabalhar coma Promise.

Abra o arquivo clientes-lista.component.ts e altere o código conforme a seguir:

import {Component, OnInit} from '@angular/core';
import { Cliente } from './cliente.model';
import { ClienteService} from './cliente.service';
@Component({
    moduleId: module.id,
    selector : 'clientes-lista',
    templateUrl: 'clientes-lista.component.html'
})
export class ClientesListaComponent implements OnInit {

    clientes : Cliente[] ;
    constructor(private clienteService : ClienteService){}
    ngOnInit() : void {
        this.clienteService.getClientes()
        .then((clientes : Cliente[]) => {
            this.clientes = clientes;
        }).catch(err => console.log(err));
     }
}

Agora o nosso método getClientes() esta retornando uma Promise de Cliente[], e usamos o método then que atua quando os dados estiverem prontos usando uma arrow function que retorna uma lista de clientes. Assim estamos recebendo a lista de clientes de forma assíncrona.

Estamos capturando possíveis erros usando a função cath e outra arrow function para escrever no console os erros.

Arrow Function :  Uma expressão arrow function possui uma síntaxe mais curta quando comparada com expressões de função (function expressions) e vincula o valor de this de maneira léxica. Arrow functions sempre são anônimas.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Agora temos o acesso a nossa lista de clientes feita de forma assíncrona, e, quando precisarmos acessar um servidor remoto tudo estará pronto.

Se você executar a aplicação neste momento verá que ela esta funcionando corretamemente.

No próximo artigo vamos obter o id do cliente da rota para retornar a página de detalhes com os dados do cliente selecionado.

Baixe a aplicação aqui :  cadastro_clientes_angular2.zip (sem a pasta node_modules para restaurar digite: npm install)

(Disse Jesus) Na verdade, na verdade vos digo que quem ouve a minha palavra, e crê naquele que me enviou, tem a vida eterna, e não entrará em condenação, mas passou da morte para a vida.
João 5:24

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti