标签: angular-httpclient

我需要帮助在Angular 4中显示来自api的subscribe输出.我怎么能这样做,因为我写了data.data.data,但它说属性数据不存在于类型对象上.我将如何在浏览器中输出？这是我下面的代码和下面的api图片

import { Component, OnInit } from '@angular/core';
import { NewsService } from '../news.service';

@Component({
  selector: 'app-news-list',
  templateUrl: './news-list.component.html',
  styleUrls: ['./news-list.component.css']
})
export class NewsListComponent implements OnInit {

  constructor(private newsService: NewsService) { }

  ngOnInit() {

    this.newsService.getNews()
      .subscribe(
        data => {
          alert("News Success");
          console.log(data);
        },
        error => {
          alert("ERROR");
        });
  }
}

嗨,我有一个登录组件,其中包含指向寄存器组件的链接.

当我点击此链接时,我遇到了这个问题:

ERROR Error: Uncaught (in promise): Error: No provider for HttpClient!
Error: No provider for HttpClient!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/co...

登录组件加载良好,寄存器失败.

在登录组件html我有:

 <a [routerLink]="['/register']" class="btn btn-link">Register</a>

我的应用程序路由如下所示:

 const appRoutes: Routes = [
{ path: '', component: HomeComponent, canActivate: [GuardService] },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },

// otherwise redirect to home
{ path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

我正在使用的版本:Node.js版本:v8.5.0 NPM版本:5.4.2

谢谢!

在一个项目中,我们使用Http和HttpClient来获取头部参数.Http返回标题参数,但HttpClient没有.

constructor(private http: Http, private httpClient: HttpClient) {}
getContent() {
        const url = '';
        return this.http.post(url, data)
            .map((res: HttpResponse<any>) => {
                console.log('http content', res);
            });


        return this.httpClient.post(url, data, { observe: 'response' })
            .map((res: HttpResponse<any>) => {
                console.log('httpClient content',res);
            });
}

在控制台中检查时,http返回带有标头的响应,但httpClient在标头中返回一个空数组.

在浏览器检查器的"网络"选项卡中选中时,它会显示所有标头参数.

服务器接受以下CORS选项:

  origin: '*',
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  allowedHeaders: 'Origin,X-Requested-With,x-access-token,Content-Type,Authorization,Accept,jwt',
  exposedHeaders: 'Content-Type,Authorization,jwt'

请帮我弄清楚如何使用httpClient获取标头.

提前致谢.

我遵循这个例子:https://www.intertech.com/Blog/angular-4-tutorial-handling-refresh-token-with-new-httpinterceptor/

一切都很好,除了方法handle401Error.除非我添加subscribe了拦截器,否则它不会执行.我必须错过一些东西,即使试图遵循这个例子.

这是相关的代码:

零件:

ngOnInit() {
  this.service.getData()
    .subscribe((response: any) => {
      this.message = `Worked with status = ${response.status}`;
    },
    error => this.message = `Failed with status = ${error.status}`);
}

服务:

constructor(private http: HttpClient) {
  this.currentToken = this.authTokenStale;
}

public authTokenStale: string = 'stale_auth_token';
public authTokenNew: string = 'new_auth_token';
public currentToken: string;

getData() {
  return this.http.get<{status}>('https://private-4002d-testerrorresponses.apiary-mock.com/getDataError401');
}

getAuthToken() {
  return this.currentToken;
}

refreshToken(): Observable<string> {
  this.currentToken = this.authTokenNew;
  return Observable.of(this.authTokenNew).delay(200);
}

拦截器:

isRefreshingToken: boolean …

我正在使用angular 4 http客户端到服务器返回文本数据,所以我做了类似下面的事情

this.http.get('assets/a.txt').map((res:Response) => 
res.text()).subscribe((data: any) => {
  console.log(data.text());
});

我没有告诉它任何响应是json格式的地方,但它仍然提出了以下错误

SyntaxError:在XMLHttpRequest.onLoad的Object.parse()处的位置0的JSON中出现意外的标记a

这些人假设的基础是json格式的响应:)

在HttpClientModule中，是否有一种传递标头和参数来获取请求的方法。

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

   const headers = { headers: new HttpHeaders({}) }
   let params = new HttpParams({ });
   get(url, {params}) // http client get with params
   get(url, {headers}); //http client get with headers 

我想要类似requestoptions的内容，或者想要一种语法来使httpClient获得发送请求标头和参数。

当前使用搜索参数构建完整的url并发送标头。

我正在学习单元测试和Angular，所以我都是这方面的初学者。我已经以角度介绍了一些有关单元测试http的教程和文章。

我不明白httpMock使用HttpTestingController做了什么。我们称实际服务为函数，那么为什么称其为模拟呢？底层过程是什么？请参考一些文章以获得更好的理解。

提前致谢。

编辑： 这是我坚持使用httpMock 的问题。

使用HTTP客户端，我将检索一个JSON文件，该文件位于assets使用CLI生成的Angular 6 App中的目录中。虽然我知道有几个与此主题相关的问题（和答案），但是在我的情况下没有一个有效。

下面是我的文件结构：

具体来说，我正在尝试检索 us-all-all.geo.json

angular.json

 "projects": {
    "ng-ngrx-highcharts-example": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng-ngrx-highcharts-example",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src",
              "src/assets",
              "src/favicon.ico",
              "src/assets/us-all-all.geo.json"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },

map-data.service.ts

import { Injectable } from '@angular/core';
import { Observable, of, from } from 'rxjs';
import * as $ from 'jquery';
import { …

我一直在网上寻找解决方案，但找不到适合我的用户情况的任何解决方案。我正在使用MEAN堆栈（角度6），并且有注册表。我正在寻找一种对API执行多个HTTP调用的方法，每个方法都依赖于前一个方法返回的结果。我需要这样的东西：

firstPOSTCallToAPI('url', data).pipe(
    result1 => secondPOSTCallToAPI('url', result1)
    result2 => thirdPOSTCallToAPI('url', result2)
    result3 => fourthPOSTCallToAPI('url', result3)
    ....
).subscribe(
    success => { /* display success msg */ },
    errorData => { /* display error msg */ }
);

我需要使用哪种RxJS运算符组合来实现此目的？一种可能的解决方案是嵌套多个订阅，但是我想避免这种情况，并使用RxJS更好地实现。还需要考虑错误处理...

先谢谢了！

我想创建一个API帮助程序类来为应用程序中的所有类型的其余api调用提供服务。我一直在使用有角度的httpClient类

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

做API交互，但最近遇到了https://ionicframework.com/docs/native/http/

谁能描述两者之间的区别，以便我可以根据自己的需求决定哪个更好。