半解决方案

Question

我正在构建一个应用程序，该应用程序使用fetch从API获取一些数据并将其注入到网页中。该应用程序以“模型-视图-控制器”模式构建。我想让数据的获取和解析发生在模型中，并注入到控制器的网站中。但是，取回一个Promise会使这变得相当棘手，因为它似乎让我可以选择在控制器中进行解析或从模型中进行注入，而这两者我都希望避免。

是否有一种构造函数的方法，以便一旦解析就从获取中返回数据，而不是应诺？

我现在拥有的：

function showMessages() {
 fetch('https://example-api.com/messages')
   .then(function(response) {
     response.json();
   })
   .then(function(messages) {
     this.messageView.wrapInHTML(messages);
   })
   .then(function(wrappedMessages) {
     document.getElementById('messages').innerHTML(wrappedMessages);
   });
}

虽然我想要这样的东西：

// in messageModel.js

MessageModel.prototype.fetchMessages = function() {
 fetch('https://example-api.com/messages')
   .then(function(response) {
     response.json();
   })


// in messageController.js

function showMessages() {
  messageData = this.messageModel.fetchMessages();
  wrappedMessages = this.messageView.wrapInHTML(messages);
  document.getElementById('messages').innerHTML(wrappedMessages);
}

Answer 1

半解决方案

尽管很hacky，也可能是反模式。您可以使用以下方法将页面上的数据与同步请求一起预加载：

head
  script(id='jsonData_1', type='application/json', src="/foo/bar/json")
  // Other JS/Imports etc

或者使用document.write并像这样加载JSON：

head
  script.
    document.write('\x3Cscript type="application/json" src="/foo/bar/j.json">\x3C/script>');

注意： HTML是用PUG / HAML编写的，以提高可读性

在代码本身中，读取该数据的DOM，例如：

const data = JSON.parse(document.getElementById('#jsonData_1').innerHTML)

最终思想

同样，请不要这样做。但是有办法;）

有没有办法从获取API中返回已解析数据，而不是答应？

1 个答案:

半解决方案

最终思想