标签: angular2-http

我有一个方法handleError(),如文档https://angular.io/docs/ts/latest/guide/server-communication.html#!#error-handling

private handleError(error: any) {
    console.error(error);
    console.log(this.loginService); // <- always undefined
    return Observable.throw(error);
}

我的问题是,this.loginService是未定义的,尽管它已在我的类中正确注入.它已经在其他方法中使用,但似乎在handleError中不可用.

http-catch调用方法的方式可能是问题吗？如果是这样,我怎么能绕过那个？处理错误时我需要执行一些逻辑.

这是一个关于如何将handleError方法设置为回调的示例(与文档完全一样)

this.http.get(url,
              ApiRequest.ACCEPT_JSON)
              .map(ApiHelper.extractData)
              .catch(this.handleError);

这里是Angular2的新手,想知道如何在阵列模式上执行此异步请求(不太确定模式名称).

因此,假设我使用Angular2 Http来获取videoId每个返回项目中包含的YouTube播放列表.然后我需要循环浏览此项目videoId并向YouTube发送另一个请求以获取个人视频信息.这可以是另一个常见的HTTP请求,获取列表然后遍历列表并获取每个单独项目的详细信息.

let url = [YouTube API V3 list url]
let detailUrl = 'https://www.googleapis.com/youtube/v3/videos?part=contentDetails,statistics';

this.http.get(url)
    .map(res => res.json())
    .subscribe(data => {
        let newArray = data.items.map(entry => {

            let videoUrl = detailUrl + '&id=' + entry.id.videoId + 
                                       '&key=' + this.googleToken;

            this.http.get(videoUrl)
                .map(videoRes => videoRes.json())
                .subscribe(videoData => {
                     console.log(videoData);

                     //Here how to I join videoData into each item inside of data.items. 
                });
    });
});

所以上面的代码确实有效.但我仍然有这两个问题:

1. 我如何加入videoData回data.items,并确保正确的物品内部的data.items与正确的加入videoData(在videoData正在使用 …

我正试图通过本指南构建角度为2的5分钟app:https: //angular.io/docs/ts/latest/tutorial/toh-pt6.html.

在http部分,我添加了一个假的服务器,但我得到404错误,因为angular2-in-memory-web-api.

http://localhost:4200/vendor/angular2-in-memory-web-api/in-memory-backend.service.js
Failed to load resource: the server responded with a status of 404 (Not Found)

我试图按照这个答案:Angular2 Tutorial(英雄之旅):找不到模块'angular2-in-memory-web-api'

但他没有使用angular-cli +我不知道在哪里添加他们在那里谈到的那些依赖关系.

我的主要内容:

// Imports for loading & configuring the in-memory web api
import { XHRBackend } from '@angular/http';

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
import { InMemoryDataService }               from './app/in-memory-data.service';

// The usual bootstrapping imports
import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/'; …

我目前正在实现一个带有spring boot作为后端的angular2示例应用程序.我在前端auth保护机制和observables方面遇到了一些问题.

我想要实现:

1. 当有人进入受保护的路线时,验证员应检查用户是否已设置在auth服务变量中
2. 如果未设置,则应发出http请求以检查会话是否可用
3. service方法应返回true/false值(由于可能的http请求而异步)
4. 如果服务返回false,则auth guard应重定向到登录页面
5. auth guard应返回true/false,以便激活或不激活路由

我的代码目前看起来像这样(我正在使用RC5顺便说一句.):

Auth Guard

import {Injectable} from "@angular/core";
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router";
import {Observable, Subject} from "rxjs/Rx";
import {AuthService} from "./auth.service";

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    var authenticated = this.authService.isAuthenticated();
    var subject = new Subject<boolean>();
    authenticated.subscribe(
        (res) => {
          console.log("onNext guard: "+res);
          if(!res && state.url !== '/signin') {
            console.log("redirecting to signin") …

我在AngularJS中不存在Angular 2的问题,我发送错误消息作为带有后端API调用的字符串,以防我有错误,错误状态401为例,问题现在我无法读取此消息来自Angular2的http响应消息,而我可以从AngularJS那样做:

我尝试了以下代码,没有任何帮助:

诺言:

this._http.post('/login',{email: 'email@example.com', password: '123'})
            .toPromise()
            .then((resp) => console.log(resp), (error) => console.log(error));

观察到:

this._http.post('/login',{email: 'email@example.com', password: '123'})
    .subscribe(response =>console.log(response), (error) => console.log(error));

从后端我发送响应作为文本,对于OK或Unauthorized,对于OK我发回String token == UUID.randomUUID().toString();,因为错误我发回消息String error = " Invalid credentials ";,问题是console.log工作并打印文本成功(在这种情况下为令牌),但如果错误,它只是打印:Response with status: 200 for URL: null.

如果我改变代码,JSON.stringify(error)我得到这样的东西:

{"_body":{},"status":401,"ok":false,"statusText":"Unauthorized","headers":{"null":["HTTP/1.1 401 Unauthorized"],"Access-Control-Allow-Headers":["Origin"," X-Requested-With"," Content-Type"," Accept"," Referer"," User-Agent"],"Access-Control-Allow-Met
hods":["POST"," GET"," PUT"," DELETE"," OPTIONS"],"Access-Control-Allow-Origin":["*"],"Allow":["*"],"Content-Length":["36"],"Content-Type":["text/plain; charset=utf-8"],"Date":["Tue"," 23 Aug 2016 14:53:25 GMT"]},"type":2,"url":null}

正如你所看到的,甚至在Object内部都没有提到错误测试!!

我试图将后端的错误响应更改为返回json,如下所示:

{
   "message": "invalid email or password"
} …

我正在玩Angular2,并希望有人可以提供一些如何实现这一目标的建议;

例如,如果我的模型目前对于员工来说是这样的:

export class Employee {
    constructor(
        public firstName: string,
        public lastName: string,
        public email: string,
        public days: string,
        public hours: string, 
    ){}
}

我希望将天/小时放入他们自己的物体中,怎么可能实现呢？

(比如..)

public availability: {
        public days: string,
        public hours: string
},

然后http get请求保持不变如下所示？

getEmployees() {
      return this.http.get('...')
             .map((response: Response) => {
                 const data = response.json().obj;
                 let objs: any[] = [];

                 for(let i = 0; i < data.length; i++) {
                     let employee = new Employee(
                     data[i].firstName,
                     data[i].lastName, 
                     data[i].email, 
                     data[i].availability.days,
                     data[i].availability.hours
                     );

                     objs.push(employee)
                 }
                 return objs
             }) …

有时httpapi调用需要很长时间才能加载数据.在这种情况下,如果我们移动另一个组件,它仍然继续执行(我们可以在浏览器控制台中看到它).那么,http当我们移动另一个组件时,有什么方法可以取消或杀死api调用？

我想在角2的替代，以角1 $ http.pendingRequest或全局跟踪像拦截任何事情。主要用于在拨打电话时显示加载图标

这是我的服务代码,它通过响应xls文件发出post请求:

exportInternalOrder(body) {
        let user_token: string = this.sessionService.getToken();
        let headers = new Headers();
        headers.append('responseType', 'arraybuffer');
        headers.append('Authorization', 'Bearer ' + user_token);
        return this.http.post(this.config.exportInternalOrder, body,{
            headers: headers
        }).map(res => new Blob([res._body],{ type: 'application/vnd.ms-excel' }));
    }

应该处理excel文件的响应.这是调用它的代码:

let objToSend = this.makeObjToSend(false);
this.reportingService.exportExcel(objToSend)
    .subscribe(
        data => {
            this.exportData(data);
        },
        error => {
            this.errorFilterMsg.push({ severity: 'error', detail: 'Report exporting has failed!' });
        }
);

这是文件的保存(由于某种原因,window.open什么都不做):

exportData(data){       
        let blob = data;
        let a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = 'fileName.xls';
        document.body.appendChild(a);
        a.click();        
    }

但该文件仍然保存为损坏的文件.使用邮差和卷曲时,它就可以了.任何帮助,将不胜感激.

我正在建立一个从后端读取数据的网站.该数据即时计算并以缓冲方式发送回客户端.即,一旦计算出第一个块,它就会被发送到客户端,然后它会计算下一个块并将其发送给客户端.整个过程发生在同一个HTTP请求中.客户端不应该等待完成响应完成,而是在发送后立即自己处理每个块.通常可以使用XHR进程处理程序(例如,如何从XMLHttpRequest获取进度)来使用此类响应.

如何使用RxJS和Observables在Angular2中使用HttpModule消耗这样的响应？

编辑:peeskillet在下面给出了一个非常详细的答案.此外,我做了一些进一步的挖掘,发现了一个关于Angular和StackOverflow问题的功能请求HttpModule,另一个方法是如何解决它.