使用带有 angular 2 的 http rest apis

IT技术 javascript angular http
2021-01-13 08:39:12

所以，我正在通过typescript在他们的网站上关注 angular 2 指南，并坚持使用 http api 集成。我正在尝试制作一个可以通过 soundcloud api 搜索歌曲的简单应用程序，但是我很难实现和理解如何开始，并且在线资源以多种不同的方式进行（我相信可以快速更改 angular 2 语法早些时候）。

所以目前我的项目看起来像这样

app
  components
    home
      home.component.ts
      ...
    search
      search.component.ts
      ...
    app.ts
    ...
  services
    soundcloud.ts
  bootstrap.ts
index.html

示例中没有什么特别的，主文件将是

应用程序

import {Component, View} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {HomeComponent} from './home/home.component';
import {SearchComponent} from './search/search.component';

@Component({
    selector: 'app',
    templateUrl: 'app/components/app.html',
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  {path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true},
  {path: '/search', name: 'Search', component: SearchComponent}
])

export class App { }

bootstrap.ts

    import {App}     from './components/app';
import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(App, [
  ROUTER_PROVIDERS
]);

我试图找出soundcloud.ts但是我无法并且在以下方法中存在错误 ie @Injectis not found （我假设我在这里使用过时的语法）。本质上，我想在我的应用程序表单搜索组件中使用 soundcloud 服务进行 api 调用。

import {Injectable} from 'angular2/core'
import {Http} from 'angular2/http'

@Injectable()
export class SoundcloudService {
 http : Http

 constructor(@Inject(Http) http) {
   this.http = http;
 }
}

soundcloud api 未包含在此处，因为我无法先了解基础知识。

2个回答

@langley 提供的答案很好，但我想添加更多要点，因此将其作为答案发布。

首先，为了使用 Rest API，我们需要导入Http和HTTP_PROVIDERSmodule。当我们谈论 Http 时，第一步显然是。

<script src="node_modules/angular2/bundles/http.dev.js"></script>

但是是的HTTP_PROVIDERS，在引导文件中提供是一个很好的做法，因为通过使用这种方式，它是在全局级别提供的，并且可以像这样在整个项目中使用。

bootstrap(App, [
    HTTP_PROVIDERS, some_more_dependencies
]);

和要包括的进口是....

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

有时我们需要Headers在使用 API 时提供发送access_token以及更多通过这种方式完成的事情：

this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))

现在到RequestMethods：基本上我们使用 GET、POST 但还有一些更多的选项你可以在这里参考......

我们可以使用 requestmethods 作为 RequestMethod.method_name

API 有更多选项，但现在我已经发布了一个 POST 请求示例，它将通过使用一些重要方法来帮助您：

PostRequest(url,data) {
        this.headers = new Headers();
        this.headers.append("Content-Type", 'application/json');
        this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))

        this.requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: url,
            headers: this.headers,
            body: JSON.stringify(data)
        })

        return this.http.request(new Request(this.requestoptions))
            .map((res: Response) => {
                if (res) {
                    return [{ status: res.status, json: res.json() }]
                }
            });
    }

你也可以参考这里了解更多信息。

也可以看看 -

更新

导入已从

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

到

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';
我是个白痴，我没有意识到这是一个 POST 请求。它完美无缺，谢谢！
2021-03-18 08:39:12
“数据”未定义。
2021-03-22 08:39:12
呵呵...没关系:p
2021-03-27 08:39:12
警告，从 Angular 5 开始，该Http服务@angular/http已被弃用。你应该使用HttpClient来自@angular/common/httpinsteed。
2021-03-28 08:39:12
@SebastianOlsendata是从组件到服务的参数传递。
2021-03-31 08:39:12

您需要添加这一行：

<script src="node_modules/angular2/bundles/http.dev.js"></script>

在您的 index.html 文件中。

您需要添加HTTP_PROVIDERS：

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]);

在您的 boot.ts/bootstrap.ts 文件中，当然并导入它们。

您需要@Inject在DojoService类文件中导入：

import {Injectable, Inject} from 'angular2/core'

就像你导入的一样@Injectable。

其它你可能感兴趣的问题
上一篇为什么调用parseInt时需要使用radix参数？ 下一篇THREE.js Ray Intersect 通过添加 div 失败