HTTP-запрос GET с использованием ionic 3?

Я новичок в ionic, я пытаюсь получить результат с помощью REST API, с помощью метода GET, но безуспешно, я застрял в этой проблеме с последних двух дней

Кто-нибудь может мне помочь, пожалуйста.

Мой код здесь

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Slides } from 'ionic-angular';
import { ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Http } from '../../../node_modules/@angular/http';
import { HttpHeaders } from '@angular/common/http';
import { Headers } from '@angular/http';
import { RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map'
let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Basic Ok9AYWNsZUAxMjM=');
    headers.append('AuthUser', '78909890');
    headers.append('SecretKey','a8658f0d67890459');

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

    this.http.get('https:I/v01/?=AttachmentFiles')
  .map(res => res.json())
  .subscribe(data =>
  {

    this.posts = data["value"]; 
    console.log('GET RESPONSE',this.posts +"");
  });

я получаю ошибку

core.js: 1449 ОШИБКА Ошибка: Неперехваченная (в обещании): Ошибка: StaticInjectorError (AppModule) [ommunicationPage -> Http]:
StaticInjectorError (Platform: core) [ommunicationPage -> Http]: NullInjectorError: Нет провайдера для Http! Ошибка: StaticInjectorError (AppModule) [mmunicationPage -> Http]:
StaticInjectorError (Platform: core) [mmunicationPage -> Http]:

Мое приложение Module.ts

import { NgModule, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { LoginPage } from '../pages/login/login';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { DashboardPage } from '../pages/dashboard/dashboard';
import { AppDashboardPage } from '../pages/app-dashboard/app-dashboard';
import { WorkHistoryPage } from '../pages/work-history/work-history';
import { ElBalancePage } from '../pages/el-balance/el-balance';
import { LearningTabPage } from '../pages/learning-tab/learning-tab';
import { MandatoryTrainigsPage } from '../pages/mandatory-trainigs/mandatory-trainigs';
import { PastDueTrainingsPage } from '../pages/past-due-trainings/past-due-trainings';
import { ActiveTrainigsPage } from '../pages/active-trainigs/active-trainigs';
import { ChartsModule } from 'ng2-charts';
import { TabsPage } from '../pages/tabs/tabs';
import { BasicDetailsPage } from '../pages/basic-details/basic-details';
import { PersonalDetailsPage } from '../pages/personal-details/personal-details';
import { HomePage } from '../pages/home/home';
import { MangerViewPage } from '../pages/manger-view/manger-view';
import { Navbar } from 'ionic-angular';
import { SuperTabsModule } from 'ionic2-super-tabs';
import { Logger } from 'angular2-logger/core';
import { RestApiProvider } from '../providers/rest-api/rest-api';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import {HelpmetModalPage} from '../pages/helpmet-modal/helpmet-modal';
import {HelpMatePage} from '../pages/help-mate/help-mate';
import {SoftLoanPage} from '../pages/soft-loan/soft-loan';

@NgModule({
  declarations: [
    MyApp,
    DashboardPage,
    LoginPage,
    AppDashboardPage,
    WorkHistoryPage,
    ElBalancePage,
    LearningTabPage,
    MandatoryTrainigsPage,
    PastDueTrainingsPage,
    ActiveTrainigsPage,
    TabsPage,
    BasicDetailsPage,
    PersonalDetailsPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ChartsModule,
    FormsModule,
    SuperTabsModule,
    IonicModule.forRoot(MyApp, { tabsPlacement: 'top', }),
    SuperTabsModule.forRoot()
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage,
    DashboardPage,
    AppDashboardPage,
    WorkHistoryPage,
    ElBalancePage,
    LearningTabPage,
    MandatoryTrainigsPage,
    PastDueTrainingsPage,
    CorpCommunicationPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Logger,
    RestApiProvider,
    InAppBrowser,
    Deeplinks,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

Пожалуйста, помогите мне заранее спасибо.


visual-studio-code ionic-framework ionic3
person user9483522    schedule 20.08.2018    source источник
comment
не могли бы вы показать AppModule   -  person Astacius    schedule 20.08.2018
comment
@Aracius, проверьте мой обновленный вопрос   -  person user9483522    schedule 20.08.2018
comment
как выглядит ваш компонент и его constructor()?   -  person Rusty    schedule 20.08.2018

Ответы (4)


arrow_upward
1
arrow_downward

Вам следует импортировать HttpModule в app.module.ts, например

import { HttpModule } from '@angular/http';

...

imports: [
    HttpModule,
],
person preejol    schedule 20.08.2018
comment
вы смешиваете httpClient и старый подход http - person preejol; 20.08.2018

arrow_upward
1
arrow_downward

Я думаю, вам не нужно импортировать так много вещей в свой app,module.ts.

Пример получения Http:

import { Http, Headers } from '@angular/http';

Не импортируйте HttpClient и HttpHeaders

getSomething(){

return new Promise((resolve, reject) => {

  let headers = new Headers();
  headers.append('Authorization', this.someToken);
  headers.append('Something', this.somethingElse);

  this.http.get('URL', {headers: headers})
    .map(res => res.json())
    .subscribe(data => {
      resolve(data);
    }, (err) => {
      reject(err);
    });
    }); 
  }

И вы называете это так:

this.someServiceWithMethod.getSomething().then((data) => {
          this.something = data;
    }, (err) => {
        console.log("something went wrong");
    });
person Astacius    schedule 20.08.2018
comment
[ts] Не удается найти имя "решить". и [ts] Не удается найти имя "отклонить". - person user9483522; 20.08.2018
comment
@ user9483522, так что просто удалите эту часть, но вот как это должно быть сделано - person Astacius; 20.08.2018
comment
Я все перепробовал. Можете ли вы рассказать мне о реализации запроса на получение с использованием заголовков с примером? Пожалуйста - person user9483522; 20.08.2018
comment
@ user9483522 добавил - person Astacius; 20.08.2018

arrow_upward
0
arrow_downward

Если вы используете HttpClient, то почему вы также импортировали Http из @ angular / http?

import { HttpClient } from '@angular/common/http';

constructor(public http: HttpClient) {}

Используйте этот HttpClient для получения запроса. Это будет работать.

person Mangesh Daundkar    schedule 20.08.2018

arrow_upward
0
arrow_downward 

    import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

    export class YourComponent {

    constructor(private http: HttpClient) {}

    YourMethod(name) {
        const params = new HttpParams().set('name',name);
        const httpOptions = {
             headers: new HttpHeaders(
                { 'Content-Type': 'application/json' },
               )
           };
        this.http.get(GET_API_URL , { params: params }, httpOptions).subscribe(res => {

        console.log(JSON.stringify(res, null, 2));
       });
    }

}

Лучшая практика: определите вызовы API в отдельном классе обслуживания.

person Sudarshana Dayananda    schedule 20.08.2018