标签: angular2-http

寻找Observable http序列的帮助,我想对api进行两次http调用,第二次依赖于第一次.第一个返回一个Urls数组,第二个为该数组中的每个url生成get请求,然后返回流上的响应.如果我在其中一个依赖请求中硬编码,那么我会找回我正在寻找的一个标题:

search(character): Observable<any> {
let that = this
let queryUrl: string = character.url;
return this.http.get(queryUrl)
  .map((response: Response) => {
    this.characterResults = response.json().films
    return this.characterResults
        //Example response: 
        // ["https://api.com/films/1", "https://api.com/films/2", "https://api.com/films/3", "https://api.com/films/4"]
  })
  .flatMap((film) => {
    return that.http.get(film[0])
    .map((response: Response) => {
      return response.json().title
    })
  })
}

getApiData(character) {
    this.apiService.search(character)
    .subscribe((results) => { // on sucesss
          console.log(results)
        },
        (err: any) => { // on error
          console.log(err);
        },
        () => { // on completion
          console.log('complete')
        }
      );

但任何尝试使用forEach迭代该数组然后进行所有http调用都会给我这个错误:

browser_adapter.js:84 EXCEPTION: TypeError: …

我正在尝试在Angular 2中创建一个通用数据服务,我遇到了一个奇怪的错误.本质上,我正在创建一个HTTP服务,其方法包含api url的一部分,以便我可以将它用于多种情况.例如,我想传递'projects /'并加入'api /'来获取'api/projects /'然后我可以在http调用中使用它.

我目前的dataService.ts:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs/Observable';
import { Configuration } from '../app.constants';

@Injectable()
export class DataService {

    private actionUrl: string;
    private headers: Headers;

    constructor(private _http: Http, private _configuration: Configuration, public action: string) {

    this.actionUrl = _configuration.ApiUrl

    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json');
    this.headers.append('Accept', 'application/json');
    }

    public GetAll (action: string): Observable<any> {
        return this._http.get(this.actionUrl + action).map((response: Response) => …

我有一个带有typescript和systemjs的角度两个应用程序.

我的应用程序只有800kb,只需4秒即可完成仅包含文本的页面.

我所有的js和css都是小/缩小的,我总共有11个请求,几乎没有任何图像

所有图像都被压缩并在cdn firebase中.

我使用firebase托管并使用cloudflare进行ssl和性能.

有没有人在负载和缓存方面遇到较差的angular2性能.

我没有在速度方面得到任何缓存改进.

下面是文件和加载时间的屏幕截图:

这是速度测试结果:https://www.webpagetest.org/result/161205_0H_S4H/

加载请求:17(参见下面加载网络选项卡的屏幕抓取)

我已经实施了一个基于"英雄之旅" 教程的项目.我已经达到了我想要开始使用真正的REST后端的程度,但理想情况下我只想通过操作来执行此操作.

我更新了post调用以使用我的REST服务的URL,如下所示:

create(hero: Hero): Promise<Hero> {
    return this.http
        .post("http://127.0.0.1:3001/api/heroes", JSON.stringify(hero), {headers: this.headers})
        .toPromise()
        .then(res => return res.json().data)
        .catch(this.handleError);
}

问题是,这仍然只是由InMemoryDbService提供的InMemoryWebApiModule.事实上,我提供的URL并不重要 - 只要它结束/heroes,它就可以工作.我可以输入任何端口号,任何路径和任何IP(只要它是以可解析的URL结尾/heroes).

我预计它HttpModule会正常工作,InMemoryWebApiModule只有当URL解析为应用程序的URL时才会被击中.显然情况并非如此,并且在某种程度上只是InMemoryWebApiModule.forRoot(InMemoryDataService)在您的模块中导入更改的方式Http(从我能说的).

所以我的问题是 - InMemoryWebApiModule在转换到真实服务时,是否可以继续使用托管模拟服务？您如何修改"英雄之旅"教程来执行单个操作？

我正在执行一些 http 请求并使用 rxjs 来成功通知结果：

  getReportings(departmentId: number): Observable<any> {
        return Observable.forkJoin(
            this.http.get('/api/members/' + departmentId).map(res => res.json()),
            this.http.get('/api/reports/' + departmentId).map(res => res.json())
        );
    }

当两个 http 请求都完成后，我想在 getReportings 方法中迭代报告数组，读取一些值，并为每个报告再次使用这些值创建一个新的 http 请求。

总而言之，我有 2 个（成员/报告）+ appr。4 到 8 个（其他东西）请求。

当所有约。完成了 6 到 8 个请求我想从成功处理程序中的前 6 到 8 个请求中获取所有数据。

我怎样才能用 rxjs 做到这一点？

更新

由于用户 olsn 要求提供更多详细信息，我现在了解他的担忧，我将更多数据放在这里（伪代码）6 到 8 个请求应该是什么样子：

getReportings(departmentId: number): Observable<any> {
    return Observable.forkJoin(
        this.http.get('/api/members/' + departmentId).map(res => res.json()),
        this.http.get('/api/reports/' + departmentId).map(res => res.json())
    ).switchMap((result: [any[], any[]]) => {
        let …

我正在扩展Angular Http对象以全局处理状态代码.

如果此状态为201,则响应对象包含用于身份验证的新令牌,并且由于它不包含已订阅该请求的组件所期望的结果,因此它还包含再次发出此请求的所有内容.

基本上,我遵循这些方案(在Http扩展类中):

return request(url, options).map((res: Response) => {
    if (res.status === 201) {
        this._authService.updateAuth(res.token);

        const newRequest = this.createNewRequest(res); // returns an Observable<Response> created with the Http.get or Http.post method

        newRequest.map((res2: Response) => {
            return res2; // I want res2 to replace res through the first map, but there is a scope problem
        });
    } else {
        return res; // In non 201 case I keep the first response (res)
    }
});

问题在于,由于范围我不知道如何在第一个映射中返回res2,因此返回给订阅者的响应是它所期望的响应.

请求成功启动,服务器返回200,因此一切正常,但订阅者没有收到回复.

我有一个平均堆栈。角 5。

我正在从表单中获取数据，并且正在调用一个服务来处理将表单数据发送到后端 api。

该服务使用 HttpClient。它发送带有正确标头和有效负载的 post 请求。它成功发布到数据库

但是...当我查看控制台的网络选项卡时，我看到 2 个相同的请求正在发出！一个成功，因为它是预期的请求，但另一个失败（由于db中的重复数据，它应该失败）

我不明白为什么要提出 2 个请求。我正在使用平均堆栈，所以（我相信）不应该有任何 CORS 问题。

有任何想法吗？

*更新信息我检查了网络选项卡

• 第一个请求具有请求方法：POST (200 OK)
• 第二个请求也有请求方法：POST (500)
• 在控制台选项卡中，来自 zone.js（webpack？）的第二个请求错误

我的表格

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text" 
      id="username"
      class="form-control"
      formControlName="username"
      placeholder="username" >
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email"
      class="form-control"
      formControlName="email"
      placeholder="email" >
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input 
      type="password" 
      id="password"
      class="form-control"
      formControlName="password"
      placeholder="password" >
  </div>
  <div class="form-group">
    <label for="name">Restaurant Name</label>
    <input 
      type="text" 
      id="name"
      class="form-control"
      formControlName="name"
      placeholder="Restaurant Name" >
  </div>    
  <div …

当我从angular 2应用程序发送http post请求时,我收到403禁止错误.下面是form.component.ts和service.ts的代码.

form.component.ts

  `import {Component, OnInit} from '@angular/core';
   import { RegisterUser} from '../Model/RegisterUser'; 
   import { RegisterService } from 
   '../Services/RegisterService';

   @Component({
   selector:'register-user-form',
   templateUrl:'/app/Htmls/Register.html',
   providers : [RegisterService]

  })

  export class RegisterUserComponent implements OnInit{

   submitted=false;

   constructor(private registerUserService : RegisterService ){
   }

  ngOnInit(){

   }


  onSubmit(value:RegisterUser){
  this.registerUserService.pushUser(value).subscribe( 

   );
   console.log(value) ;
   }

 }`

以下是service.ts

 import { Injectable } from '@angular/core';
 import { Headers,Http, Response }  from '@angular/http';
 import { RegisterUser} from '../Model/RegisterUser';
 import 'rxjs/add/operator/map';

 @Injectable()
  export class RegisterService {
  private headers = new Headers({'content-type': 'application/json'}); …

我有简单的身份验证服务，我使用 jwt 令牌，如果我需要用户详细信息来检查授权标头并发送请求 api 端点，但 angular 2 请求发送第一个请求标头为空键，但第二个正确的标头让我解释一下

网络运营 http://pasteboard.co/c3wmFZvtJ.jpg

错误的标题 http://pasteboard.co/c3wDdFxMy.jpg

正确的标题 http://pasteboard.co/1cKy9EHDy.jpg

我的 Http.Get 函数

getUsers(): Observable<User[]> {
    // Authorization Tokeni Ayarlan?yor
    let headers = new Headers({ 'Authorization': this.authenticationService.token });
    let options = new RequestOptions({ headers: headers });
    // Kullan?c? Headeri Gönderiliyor
    return this.http.get('http://localhost/Hesap/Detay', options)
        .map((response: Response) => 
            response.json().detay
     ); 
}

我在这里调用这个函数

ngOnInit() {
    this.userService.getUsers()
        .subscribe(users => {
            this.users = users;
        });
}

PHP端

public function Detay(){
    echo $this->headers["authorization"];
    if(!isset($this->headers["authorization"]) || empty($this->headers["authorization"])){
        echo json_encode(array("Hata" => "Header Yok"));
    }else{ …