问题：

Angular2 Http请求

轩辕啸

2023-03-14

你好，我正试图使用Angular2中的HTTP模块进行获取请求。

在Typescript（1.5）中，一切都可以正常编译，但是Chrome在控制台中显示以下错误：

EXCEPTION: Error during instantiation of EntryList!. ORIGINAL
EXCEPTION: TypeError: Cannot read property 'merge' of undefined
ORIGINAL STACKTRACE: TypeError: Cannot read property 'merge' of undefined
at mergeOptions (angular2.dev.js:27991)  
at execute.Http.get (angular2.dev.js:28052)  
at EntryService.getEntries (services.js:17)
at new EntryList (entry-list.js:20)

/// <reference path="../typings/angular2/angular2.d.ts" />
import { Http, Observable } from "angular2/angular2"

export class EntryService {
    private _entries: Array<string>;
    private _http : Http;

    constructor() {     
        this._entries = ["test1", "test2", "test3"];
        this._http = new Http;      
    }

    get Entries() : Array<string> {
        return this._entries;
    }

    getEntries()
    {
        console.log(this._http);
        return this._http.get('http://localhost:53338/api/decisions')       
            .toRx()
            .map((response) => { 
                response.json()
            });     
    }
}

/// <reference path="../typings/angular2/angular2.d.ts" />
/// <reference path="../modules/services.ts" />

import { Component, View, NgFor } from "angular2/angular2"
import { EntryService } from "modules/services"

@Component({
    selector: 'entry-list'  
})
@View({
    directives: [ NgFor ],
    templateUrl: "../views/entry-list.html" 
})
export class EntryList {
    entries: Array<string>; 

    constructor(public service: EntryService) {     
        this.entries = this.service.Entries;
        this.service.getEntries().subscribe((response) => {     
            console.log(response);
        }); 
    }
}

/// <reference path="typings/angular2/angular2.d.ts" />
/// <reference path="components/entry-list.ts" />
/// <reference path="modules/services.ts" />

import { Component, View, bootstrap, NgFor } from "angular2/angular2"
import { EntryList } from "components/entry-list"
import { EntryService } from "modules/services"

@Component({
    selector : "app",
    bindings: [ EntryService ]  
})
@View({
    directives: [ EntryList ],
    templateUrl: "views/app.html"   
})
class App { 
    constructor() {
        console.log('hit');
    }
}

bootstrap(App);

<html>
    <head>
        <title>SCM</title>
        <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.88/traceur-runtime.js"></script>
        <script src="https://jspm.io/system@0.16.js"></script>      
        <script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script>
    </head>
    <body>
        <app></app>
        <script>System.import('app')</script>
    </body>
</html>

我确实看了angular上的API文档。io站点，但看不出有什么问题。

/// <reference path="../typings/angular2/angular2.d.ts" />
import { Http, Observable, httpInjectables } from "angular2/angular2"

export class EntryService {
    private _entries: Array<string>;    

    constructor(private http: Http) {       
        this._entries = ["test1", "test2", "test3"];            
    }

    get Entries() : Array<string> {
        return this._entries;
    }

    getEntries()
    {
        console.log(this.http);
        return this.http.get('http://localhost:53338/api/decisions')        
            .toRx()
            .map((response) => { 
                response.json()
            });     
    }
}

/// <reference path="../typings/angular2/angular2.d.ts" />
/// <reference path="../modules/services.ts" />

import { Component, View, NgFor, Http, httpInjectables } from "angular2/angular2"
import { EntryService } from "modules/services"

@Component({
    selector: 'entry-list',
    bindings : [ Http, httpInjectables ]
})
@View({
    directives: [ NgFor ],
    templateUrl: "../views/entry-list.html" 
})
export class EntryList {
    entries: Array<string>; 

    constructor(public service: EntryService) {     
        this.entries = this.service.Entries;
        this.service.getEntries().subscribe((response) => {     
            console.log(response);
        }); 
    }
}

/// <reference path="typings/angular2/angular2.d.ts" />
/// <reference path="components/entry-list.ts" />
/// <reference path="modules/services.ts" />

import { Component, View, bootstrap, NgFor, Http, httpInjectables } from "angular2/angular2"
import { EntryList } from "components/entry-list"
import { EntryService } from "modules/services"

@Component({
    selector : "app",
    bindings: [ EntryService, Http, httpInjectables ]   
})
@View({
    directives: [ EntryList ],
    templateUrl: "views/app.html"   
})
class App { 
    constructor() {
        console.log('hit');
    }
}

bootstrap(App);

没有任何更改到index.html

编辑：我的services.ts文件更改以使此工作：

/// <reference path="../typings/angular2/angular2.d.ts" />
import { Injector, Http, httpInjectables } from "angular2/angular2"

export class EntryService {
    private _entries: Array<string>;    
    private http: Http;

    constructor() {     
        this._entries = ["test1", "test2", "test3"];        

        var injector = Injector.resolveAndCreate([
                httpInjectables,
                Http
            ]);
        this.http = injector.get(Http);                 
    }

    get Entries() : Array<string> {
        return this._entries;
    }

    getEntries()
    {       
        return this.http.get('http://localhost:53338/api/decisions')        
            .toRx()
            .map(response => response.json());      
    }
}

共有2个答案

尉迟宪

2023-03-14

您真的想只为CRUD/HTTP请求使用另一个库吗**

那么，我强烈推荐es6事实上的获取。在我看来，它不仅比angular2/超文本传输协议更简单，而且现在和未来版本的标准也更简单。

**对于safari、chrome、ie edge和firefox来说，它也是开箱即用的。

哈雅珺

2023-03-14

您不应该自己实例化Http，而是将其注入：

public constructor(http : Http) {
    this.http = http;
}

文件说：

Http是一个可注入类，具有执行Http请求的方法。

因此，如果您自己实例化它，我不确定结果是什么，但是由于一些未定义的内部结构，它无法设法执行get请求。

编辑：添加更多源。

@Injectable()
export class Http {
    constructor(protected _backend: ConnectionBackend, protected _defaultOptions: RequestOptions) {}

    /**
     * Performs a request with `get` http method.
     */
    get(url: string, options?: RequestOptionsArgs): EventEmitter {
        return httpRequest(this._backend, new Request(mergeOptions(this._defaultOptions, options, RequestMethods.GET, url)));
  }
}

在这里，我从github repo添加了Http类的一小部分。您可以看到_backend和_defaultOptions在构造函数中给出，而您没有给出，方法get（）将基于options参数和构造函数中给出的_defaultOptions为请求生成选项，因为您没有提供这些选项，我相信它会在您可以在此处找到的mergeOptions调用中崩溃：

function mergeOptions(defaultOpts, providedOpts, method, url): RequestOptions {
  var newOptions = defaultOpts;
  if (isPresent(providedOpts)) {
    // Hack so Dart can used named parameters
    newOptions = newOptions.merge(new RequestOptions({
      method: providedOpts.method,
      url: providedOpts.url,
      search: providedOpts.search,
      headers: providedOpts.headers,
      body: providedOpts.body,
      mode: providedOpts.mode,
      credentials: providedOpts.credentials,
      cache: providedOpts.cache
    }));
  }
  if (isPresent(method)) {
    return newOptions.merge(new RequestOptions({method: method, url: url}));
  } else {
    return newOptions.merge(new RequestOptions({url: url}));
  }
}

在函数的最后一个if/else。有关更多信息，源文件位于此处。

类似资料：

Angular2HTTP。get（）、map（）、subscribe（）和observable模式-基本理解

现在，我有了一个初始页面，其中有三个链接。单击最后一个“好友”链接后，相应的好友组件将启动。在那里，我想把我的朋友名单变成朋友名单。json文件。到目前为止，一切都很顺利。但我仍然是angular2的HTTP服务的新手，使用RxJs的可观测、映射、订阅概念。我试着理解它，读了几篇文章，但在我进入实际工作之前，我不会正确理解这些概念。这里我已经做了plnkr，除了HTTP相关的工作。 Plnkr
请求

一个应用的请求是用 yii\web\Request 对象来表示的，该对象提供了诸如请求参数（译者注：通常是GET参数或者POST参数）、HTTP头、cookies等信息。默认情况下，对于一个给定的请求，你可以通过 request application component 应用组件（yii\web\Request 类的实例）获得访问相应的请求对象。在本章节，我们将介绍怎样在你的应用中使用这个
请求

Wiki ▸ [[API--中文手册]] ▸ [[核心函数]] ▸ 请求如果你不访问数据那么你就不能可视化它。幸运的是有很多的方法可以把数据放到浏览器中。对于小数据集，你可以硬编码到你的脚本里，或者使用数据属性嵌入到DOM中。对于大数据集，你可以引用外部脚本并定义你的数据为一个全局变量。（JSONP就是一个常见的例子）。最通用的方式是使用XMLHttpRequest, 或说XHR加载数据到浏览器
请求

请求对象(Request) 是完全基于 PSR-7 标准实现的，由 hyperf/http-message 组件提供实现支持。注意 PSR-7 标准为请求(Request) 进行了 immutable 机制的设计，所有以 with 开头的方法的返回值都是一个新对象，不会修改原对象的值安装该组件完全独立，适用于任何一个框架项目。 composer require hyperf/http-m
请求

请求对象封装了客户端请求的所有信息。在 HTTP 协议中，这些信息是从客户端发送到服务器请求的 HTTP 头部和消息体。
GET请求的许可请求

我有一个具有OAuth2授权的Spring Cloud应用程序：我添加了这个安全配置： github：https://github.com/rcbandit111/OAuth2/blob/master/src/main/java/org/engine/security/WebSecurityConfig.java 打开Angular应用程序时，出现访问错误：您知道我需要应用什么配置才能在没有强
无法请求请求属性-请求不再活动

有人能帮我吗？谢谢
全面解析iOS中同步请求、异步请求、GET请求、POST请求

本文向大家介绍全面解析iOS中同步请求、异步请求、GET请求、POST请求，包括了全面解析iOS中同步请求、异步请求、GET请求、POST请求的使用技巧和注意事项，需要的朋友参考一下先给大家分别介绍下iOS中同步请求、异步请求、GET请求、POST所代表的意思，然后在逐一通过实例给大家介绍。 1、同步请求可以从因特网请求数据，一旦发送同步请求，程序将停止用户交互，直至服务器返回数据完成，才可以进

Angular2 Http请求

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档