首页 文章

Angular 2 HTTP请求问题

提问于
浏览
0

真的希望有人可以帮助我 .

我要做的是:为json调用REST API并解决Angular 2的承诺 .

ServerAPI running Node.js/ExpressJS/Lodash

Server.js文件:

var express = require('express');
var app = express();
var bodyParser = require("body-parser");
var data = require('./data.json');
var _ = require('lodash');
var cors = require('cors');


app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());


app.get('/GetData', function (req, resp) {

if (req.query.search != null) {

    var result = _.find(data, function (o) {
        return o.value === req.query.search.toLowerCase().trim()
    });

    return resp.send(result)

} 

});

    app.listen(1337, function () {
    console.log('Listening at Port 1337'); 
});

运行测试http://localhost:1337/GetData?search=colorado并返回一个vaild json对象 .

ClientAPI

服务文件调用HTTP请求:

import {Injectable} from "@angular/core";
import {Http} from "@angular/http";
import {Config} from "../config";
import {SearchResult} from "../models/search-result.model";
import {MockSearchData} from "../mock/mock-search-results";
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';


@Injectable()
export class ApiDataService {

    constructor(private http:Http) {
    }

    public     performSearchRequest(searchTerm:string,queryType:string):Promise<SearchResult[]>     {
    return new Promise<SearchResult[]>((resolve, reject) => {

        let url = Config.apiBaseUrl + Config.searchApi;
        url += "?search=" + searchTerm;

        console.log("Your query to be: " + url);

        if (searchTerm != "") {

            if (queryType == 'mock') {

                resolve(MockSearchData);


            } else if (queryType == 'api') {

                let data = [];

                this.http.get(url)
                    .map(resp => resp.json())
                    .subscribe(getData => data = getData);

                resolve(data);

            } else {

                reject("No query type found.");

            }

        } else {

            reject("Please enter a search term.");

        };

    });
}
}

作为ClientAPI中的本地json文件的模拟数据的解析完美地运行 . 我需要让api查询类型的if函数起作用 .

Angular应用程序启动没有问题,并且运行http.get而没有错误 . 我检查了dev工具下的网络选项卡,可以看到HTTP请求已完成并返回其响应是我想要解析的有效JSON对象,例如有返回的数据 . 然而,我解决这个问题的表格是空白的 .

我究竟做错了什么!

1 回答

  • 0

    问题出现在这里:

    this.http.get(url)
       .map(resp => resp.json())
       .subscribe(getData => data = getData);
    
    resolve(data);
    

    您订阅了observable,但是当您之后直接调用 resolve 时,它尚未“解析” . 这意味着你真的只是在调用 resolve([]) .

    相反,做这样的事情:

    this.http.get()./*...*/.subscribe(result => resolve(result));
    

    您还可能希望查看Observables上的toPromise方法以及直接构造已解析的promise的方法 .

相关问题