Aureliaコンテンツ管理チュートリアルAPI - プロパティ '未定義の'を読み取ることができません

Question

私はAureliaを学んでいます。コンテンツ管理のチュートリアルに続いて、私は実際のAPI呼び出しを試みることを提案しました。だから、私はちょうどそれを試みている。

私は、私は新しいを作成し、その後、次の

"dependencies": [ 
    .., 
    "aurelia-http-client", 
    ... 
] 

を追加し、aurelia_project/aurelia.jsonファイルでGET

// test_server.js 
const http = require('http'); 

const hostname = '127.0.0.1'; 
const port = 3000; 

var contacts = [ 
    { 
     id: 1, 
     firstName: 'John', 
     lastName: 'Doe', 
     email: 'jdoe@gmail.com', 
     phoneNumber: '867-5309' 
    }, 
    { 
    id:2, 
    firstName:'John', 
    lastName:'Doh', 
    email:'jdoh@gmail.com', 
    phoneNumber:'867-5308' 
    }, 
]; 

const server = http.createServer((req, res) => { 
    res.setHeader('Access-Control-Allow-Origin', '*'); 
    res.setHeader('Access-Control-Request-Method', '*'); 
    res.setHeader('Access-Control-Allow-Methods', 'GET'); 
    res.setHeader('Access-Control-Allow-Headers', '*'); 

    res.statusCode = 200; 
    res.setHeader('Content-Type', 'application/json'); 
    res.end(JSON.stringify(contacts)); 
}); 

server.listen(port, hostname,() => { 
    console.log(`Server running at http://${hostname}:${port}/`); 
}); 

上のオブジェクトのJSON配列を返す単純なノードサーバ作られていますWeb APIファイル。ここで

//new-web-api.js (es2015) 
import {HttpClient} from 'aurelia-http-client'; 

export class NewWebAPI { 

    getAllContacts() { 
     var client = new HttpClient(); 

     client.get('http://127.0.0.1:3000') 
      .then(data => { 
       console.log(data.response) 
       return new Promise(resolve => JSON.parse(data.response)); 
      }) 
      .catch(err => { 
       console.log('failed to get a response :-(') 
      }); 
    } 
} 

が更新contact-list.jsファイル、

// src/contact-list.js 
import {NewWebAPI} from './new-web-api'; 

import {EventAggregator} from 'aurelia-event-aggregator'; 
import {ContactUpdated, ContactViewed} from './messages'; 

export class ContactList { 

    static inject() { 
    // we declare an "inject" static method that returns an array of constructor 
    // dependencies 
    return [NewWebAPI, EventAggregator] 
    }; 

    constructor(api, ea) { 
    this.api = api; 
    this.contacts = []; 

    /*ea.subscribe(ContactViewed, msg => this.select(msg.contact)); 
    ea.subscribe(ContactUpdated, msg => { 
     let id = msg.contact.id; 
     let found = this.contacts.find(x => x.id === id); 
     Object.assign(found, msg.contact); 
    });*/ 
    } 


    created() { 
    this.api.getAllContacts().then(contacts => this.contacts = contacts); 
    } 

    select(contact) { 
    this.selectedId = contact.id; 
    return true; 
    } 
} 

である私はnew-web-apiではconsole.logがそれを証明している（バックサーバーからデータを取得しています。

私はただのわかりませんよ約束をcontact-listモジュールに返す方法

ありがとうございます。

Answer 1

JSON.parseは約束を返しません。JSONから解析されたオブジェクトを返すだけなので、約束しているJSONを返す必要があります。約束を返すのはgetAllContactsです。以下を参照してください。

//new-web-api.js (es2015) 
import {HttpClient} from 'aurelia-http-client'; 

export class NewWebAPI { 

    getAllContacts() { 
     var client = new HttpClient(); 

     return client.get('http://127.0.0.1:3000') 
      .then(data => { 
       console.log(data.response) 
       return JSON.parse(data.response); 
      }) 
      .catch(err => { 
       console.log('failed to get a response :-(') 
      }); 
    } 
} 

他のすべては同じままでなければなりません。これが役に立ったら教えてください。