Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
11
respostas

Consultando uma API

Amigo,

Estou fazendo um aplicativo, onde o mesmo vai apenas consultas as vendas de um individuo.

Eu ja tenho uma API formada, queria saber como faço para consultar a mesma.

eu uso essa API no postman, a mesma funcina. Configuraçoes do postman:

POST: http://url.com.br Headers: key value

Content-type application/x-www-form-urlencoded

Body:

(x) x-www-form-urlencoded

Key Value

versao 1.1

consultaVenda {"dataPagamento":"2017-04- 03","dataPagamentoFinal":"2017-05-03"}

token xxxxxxxxxxxxxxx


meu codigo:

import{Component} from '@angular/core';
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { NavController } from 'ionic-angular';

@Component({

})
export class HomePage {
  constructor(public navCtrl: NavController, public http: Http) {
  }

  postRequest() {
    var headers = new Headers();
    headers.append('Content-Type', ' application/x-www-form-urlencoded ' );
    headers.append()
    let options = new RequestOptions({ headers: headers });

    let postParams = {
      versao: 1.1,
      consultaVenda: '{"dataPagamento":"2017-04-03","dataPagamentoFinal":"2017-05-03"}',
      token: 'xxxxxxxxxxxx'
    }

    this.http.post(" hhttp://url.com.br",
     postParams, options)
      .subscribe(data => {
        console.log(data['_body']);
       }, error => {
        console.log(error);
      });
  }
}
11 respostas

Boa tarde.

Você quer consultar a API? Consulta usamos GET e não POST. Sobre consular a API, se a sua API esta corretamente configurada, o código que você postou é suficiente para acessa-la, aliás, fazemos isso o tempo todo no curso de Ionic.

Se por algum motivo não esta funcionando, deve ser um problema na sua API que o postman não foi afetado. Aliás, você não postou nenhuma mensagem de erro sobre sua tentativa de acessar a API através do Ionic.

Flavio, boa tarde.

No console nao mostra nenhum erro.

Porem o Objeto json nao vem.

Esse objeto é pra vir no console certo?

Com esse codigo o mesmo nao me retornaria a consulta feita?

Complemetando.

Essa sao as instruçoes para acessar a API.

metodo de envio: POST

URL: http://urlilustrativa.com.br

Passo 4 - Adicionar os parametros e seus respectivos valores, conforme exemplo :

Parâmetro 1 - Key = versao Value = 1.1 Parâmetro 2 - Key = consultaVenda Value = '{"dataPagamento":"2017-04-03","dataPagamentoFinal":"2017-05-03"}', Parâmetro 2 - Key = token Value = 00000000000000

Se não veio e não há nenhuma mensagem de erro no console, fica difícil descobrir o que esta acontecendo.

Todavia, você pulo um passo importante que é ensinado no curso. Você não transformou a resposta em JSON.

Dá uma verifica que lá eu faço res.json() e dai eu tenho acesso ao JSON. Se mesmo com isso não vier os dados que você deseja, é necessário angariar mais informações.

Não esqueça que para usar ionic 2 é preciso saber Angular 2. Por exemplo, essa parte é puro código Angular 2.

Flavio, boa tarde

Corrigi algumas coisa e o codigo ficou assim:

import { Injectable } from '@angular/core';
import { Http,RequestOptions, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { Request } from '@angular/http/src/static_request';


/*
  Generated class for the MyRequest provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class MyRequest {
  data:any;

  constructor(public http: Http) {
    this.data = null;
  }
  load(){
    if (this.data){

      return Promise.resolve(this.data);
    }

    return new Promise (resolve =>{


     let myHeader = new Headers({

      "Content-Type" : "application/x-www-form-urlencoded"

     });
      let options = new RequestOptions({
        headers: myHeader

      });
      let body = JSON.stringify({

        versao : 1.1,
        consultaVenda : {"datanicial":"2017-04-03","dataFinal":"2017-05-03"},
        token : '0102040502010201'

      });

      this.http.post(' http://www.vendas.com.br/br-ws/todos/json/consultaVenda',
      body, options)
      .map(res => res.json())
      .subscribe(data =>{
        this.data = data;
        resolve(this.data);
      });
    });
    }

}

Porem ainda nao estorna a consulta que faço no body(consultaVenda : {"datanicial":"2017-04-03","dataFinal":"2017-05-03"},.

Os erros no console é :

device/simulator
cordovaWarn @ main.js:221
localhost/:1 Failed to load http://www.vendas.com.br/br-ws/todos/json/consultaVenda: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
main.js:52121 EXCEPTION: Response with status: 0  for URL: null
ErrorHandler.handleError @ main.js:52121
localhost/:1 Failed to load http://www.vendas.com.br/br-ws/todos/json/consultaVenda: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
main.js:52121 EXCEPTION: Response with status: 0  for URL: null
ErrorHandler.handleError @ main.js:52121

Se poder me ajudar... desde ja agradeço.

No caso, eu preciso fazer a consulta no servidor e me retorna o JSON com oque eu consultei (consultaVenda : {"datanicial":"2017-04-03","dataFinal":"2017-05-03"},

O problema é que você criou uma API ou esta acessando uma API que não suporta CORS. Ficou fácil para mim descobrir isso vendo a mensagem de erro que você esta recebebdo:

localhost/:1 Failed to load http://www.vendas.com.br/br-ws/todos/json/consultaVenda: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

Você precisa alterar a API para que suporte CORS ou nada feito. Isso varia de plataforma/linguagem. Mas o mais importante é você saber que precisa suportar CORS.

Se a API estivesse no mesmo endereço e porta (domínio e porta da sua aplicação) o acesso seria permitido.

Isso sai totalmente o âmbito do Ionic e cai no design de API's. Para saber mais sobre o conceito de CORS você pode consultar https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS

Ok entao flavio, Muito obrigado pela ajuda.

So uma pergunta.

O codigo feito entao esta correto?

Porem a API que nao suporta CORS ne isso ?

solução!

Pela mensagem de erro que você postou, se sua APP tentou acessar API e foi bloqueada por ela não suportar CORS não dá para dizer ainda se os dados que são enviados estão corretos para API, porque ela cancelou o acesso da API antes mesmo que ela fosse consumida.

Em teoria, seu código esta correto, se passou os dados que a API precisa. Como disse e confirmando, o problema é que você não esta conseguindo realizar uma requisição entre domínios, o que necessita de CORS para funcionar.

Legal!!