Angular 2 HTTP GET到节点后端以获取目录中的文件名列表

Angular 2 HTTP GET to Node backend for list of file names in directory

本文关键字：列表 文件名 获取 HTTP GET 后端 节点 Angular      更新时间：2023-09-26

我正试图使用Angular 2 HTTP GET请求来简单地连接Node/Express后端，后者使用fs.readdr方法以某个文件夹中的文件名列表作为响应。

我将Angular 2请求设置为服务：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import './rxjs-operators';
@Injectable()
export class PhotoService {
  constructor (private http: Http) {}
  private photosUrl = '/api/photos';  // URL to web API
  getPhotos() : Observable<string[]> {
    return this.http.get(this.photosUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }
  private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }
}

然后从一个组件调用此服务：

ngOnInit() {
    this.photoService.getPhotos()
                     .subscribe(
                        photos => this.fileList = photos,
                        error => this.errorMessage = <any>error);
}

这是节点后端(根据惯例设置Express(：

//Photo Service
app.get('/api/photos', function(req, res) {
        fs.readdir('./uploads', function(error, files) {
          if (error) {
            throw error;
          }
          else {
            res.end(files);
          }
        });
});

如图所示，HTTP请求调用GET方法http://localhost:3000/api/photosNode后端应该接收该请求并发回一组字符串，这些字符串具有"uploads"文件夹中的文件名。

然而，它似乎不起作用。我想我对Nodeneneneba API发送响应的格式以及它如何与Angular在服务中使用的Observable类型一起工作感到困惑。

您的Angular 2代码在我看来不错。但在Node后端，您不应该使用res.end()发送数据(请参阅文档(。正确的是res.send(files);，或者在您的情况下是res.json(files);，它也将设置正确的Content-Type标头。

相关文章：