草庐IT

javascript - Angular2 Http 请求

coder 2024-07-15 原文

您好，我正在尝试使用 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)

服务.ts

/// <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()
            });     
    }
}

条目列表.ts

/// <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);
        }); 
    }
}

应用.ts

/// <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);

index.html

<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.io 站点上的 API 文档，但看不出有什么问题。

更新

服务.ts

/// <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()
            });     
    }
}

条目列表.ts

/// <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);
        }); 
    }
}

应用.ts

/// <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());      
    }
}

最佳答案

你不应该自己实例化 Http，而是注入(inject)它:

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

文档说:

Http is available as an injectable class, with methods to perform http requests.

因此，我不确定如果您自己实例化它会产生什么结果，但由于某些未定义的内部结构，它无法以某种方式执行获取请求。

编辑:添加更多来源。

@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 存储库的 Http 类的一小部分。您可以看到 _backend 和 _defaultOptions 在您没有提供的构造函数中给出，方法 get() 将根据构造函数中提供的选项参数和 _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。有关更多信息，源文件位于 here .

关于javascript - Angular2 Http 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32096941/

javascriptAngular2angular34typescriptangular2-http

有关javascript - Angular2 Http 请求的更多相关文章

  1. ruby - 如何模拟 Net::HTTP::Post？ - 2

    是的，我知道最好使用webmock，但我想知道如何在RSpec中模拟此方法:defmethod_to_testurl=URI.parseurireq=Net::HTTP::Post.newurl.pathres=Net::HTTP.start(url.host,url.port)do|http|http.requestreq,foo:1endresend这是RSpec:let(:uri){'http://example.com'}specify'HTTPcall'dohttp=mock:httpNet::HTTP.stub!(:start).and_yieldhttphttp.shou

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  4. ruby - Net::HTTP 获取源代码和状态 - 2

    我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。 最佳答案 在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur

  5. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

  6. ruby-on-rails - Rails - 从命名路由中提取 HTTP 动词 - 2

    Rails中有没有一种方法可以提取与路由关联的HTTP动词？例如，给定这样的路线:将“users”匹配到:“users#show”，通过:[:get,:post]我能实现这样的目标吗？users_path.respond_to?(:get)(显然#respond_to不是正确的方法)我最接近的是通过执行以下操作，但它似乎并不令人满意。Rails.application.routes.routes.named_routes["users"].constraints[:request_method]#=>/^GET$/对于上下文，我有一个设置cookie然后执行redirect_to:ba

  7. ruby-on-rails - Heroku 吃掉了我的自定义 HTTP header - 2

    我正在使用Heroku(heroku.com)来部署我的Rails应用程序，并且正在构建一个iPhone客户端来与之交互。我的目的是将手机的唯一设备标识符作为HTTPheader传递给应用程序以进行身份​​验证。当我在本地测试时，我的header通过得很好，但在Heroku上它似乎去掉了我的自定义header。我用ruby​​脚本验证:url=URI.parse('http://#{myapp}.heroku.com/')#url=URI.parse('http://localhost:3000/')req=Net::HTTP::Post.new(url.path)#boguspara

  8. ruby-on-rails - 使用 HTTP.get_response 检索 Facebook 访问 token 时出现 Rails EOF 错误 - 2

    我试图在我的网站上实现使用Facebook登录功能，但在尝试从Facebook取回访问token时遇到障碍。这是我的代码:ifparams[:error_reason]=="user_denied"thenflash[:error]="TologinwithFacebook,youmustclick'Allow'toletthesiteaccessyourinformation"redirect_to:loginelsifparams[:code]thentoken_uri=URI.parse("https://graph.facebook.com/oauth/access_token

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. ruby - HTTP 请求中的用户代理，Ruby - 2

    我是Ruby的新手。我试过查看在线文档，但没有找到任何有效的方法。我想在以下HTTP请求botget_response()和get()中包含一个用户代理。有人可以指出我正确的方向吗？#PreliminarycheckthatProggitisupcheck=Net::HTTP.get_response(URI.parse(proggit_url))ifcheck.code!="200"puts"ErrorcontactingProggit"returnend#Attempttogetthejsonresponse=Net::HTTP.get(URI.parse(proggit_url)

随机推荐