如何使用EmberJS从外部API获取数据？

Question

所以我想学习EmberJS，而且我正在努力用这个。基本上，我有以下的基本结构

模板：

<ul> 
    {{#each model as |game|}} 
    <li>{{game.title}} - {{game.console}}</li> 
    {{/each}} 
</ul> 

路由文件：但

export default Ember.Route.extend({ 
    model() { 
     return [ 
     {'title':'Super Mario Bros', 'console':'NES'}, 
     {'title':'Pac Man', 'console':'Arcade'}, 
     {'title':'Galaga', 'console':'Arcade'}, 
     {'title':'Frogger', 'console':'Arcade'}, 
     {'title':'Marvel vs. Capcom', 'console':'Arcade'}, 
     {'title':'The Legend of Zelda', 'console':'NES'}, 
     {'title':'CastleVania', 'console':'NES'}, 
     {'title':'Final Fantasy IV', 'console':'SNES'}]; 
    } 
}); 

而不仅仅是硬编码像我这里，我想拉它来自使用GET调用的Apiary API链接。我该怎么做？

（蜂房https://private-9c66cc-managementconsole.apiary-mock.com/getactiveroms）

Answer 1

对于一个JSON兼容的API，你可以做这样的事情：

export default Ember.Route.extend({ 
    model() { 
    let url = 'https://private-9c66cc-managementconsole.apiary-mock.com/getactiveroms'; 
    return Ember.$.getJSON(url); 
    }, 
}); 

然而，由于这种API不与有效的JSON回应，你会去取API作为文本并在将其解析为JSON之前操作响应。

export default Ember.Route.extend({ 
    model() { 
    let url = 'https://private-9c66cc-managementconsole.apiary-mock.com/getactiveroms'; 
    return Ember.$.ajax({ 
     url: url, 
     dataType: 'text', 
    }) 
    .then((result) => { 
     result = result.replace(/[ \n]+/g, ''); 
     result = result.substring(1, result.length - 1); 
     result = result.replace(/'/g, '"'); 
     return JSON.parse(result); 
    }, (err) => { 
     console.log('err', err); 
    }); 
    }, 
}); 

我建议更新API响应以包含有效的JSON，以使您的生活更轻松。