http请求上的角度ERR_CONNECTION_TIMED_OUT答案

【问题标题】：Angular ERR_CONNECTION_TIMED_OUT on http requesthttp请求上的角度ERR_CONNECTION_TIMED_OUT
【发布时间】：2017-05-27 23:30:15
【问题描述】：

您好，我是 Angular 的新手，正在尝试创建一个使用 Spotify API 的应用程序。当我使用我的搜索组件进行搜索时，什么也没发生，并且我在控制台中收到错误

GET https://api.spotfiy.com/v1/search?query=adf&offset=0&limit=20&type=artist&market=USnet::ERR_CONNECTION_TIMED_OUT

这里是包含服务的地方 service.ts

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

@Injectable()

export class SpotifyService{

private searchUrl:string;

constructor(private _http:Http){

 }

searchMusic(str:string, type="artist"){

this.searchUrl = `https://api.spotfiy.com/v1/search?query=${str}&offset=0&limit=20&type=${type}&market=US`;
return this._http.get(this.searchUrl).map(res => res.json());

}

}

搜索组件

import { Component } from '@angular/core';
import {SpotifyService} from '../../services/spotify.service';

@Component({
  moduleId: module.id,
  selector: 'search',
  templateUrl: 'search.component.html',
  //providers:[SpotifyService]
})
export class SearchComponent{
  searchStr:string;

  constructor(private _spotifyService:SpotifyService){

  }

  searchMusic(){

    this._spotifyService.searchMusic(this.searchStr).subscribe(res => {
        console.log(res.artist.items);

      })
  }

}

app.module

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { RouterModule, Routes } from '@angular/router';
import { NavbarComponent } from './components/navbar/navbar.component';
import { AboutComponent }  from './components/about/about.component';
import { SearchComponent }  from './components/search/search.component';
import { FormsModule }   from '@angular/forms';
import { HttpModule  } from '@angular/http';
import { SpotifyService } from './services/spotify.service';

const routes: Routes = [
    { path: '', component: SearchComponent },
    { path: 'about', component: AboutComponent }
]

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes) ],
  declarations: [ AppComponent, AboutComponent, NavbarComponent, SearchComponent ],
  providers:    [ SpotifyService ],
  bootstrap:    [ AppComponent ],

})
export class AppModule { }

【问题讨论】：

标签： angular angular2-services angular-http

【解决方案1】：

您的网址中有错字。您不小心输入了 spotfiy 而不是 spotify。它发生了:)

【讨论】：