Solucionado (ver solução)
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!!