【问题标题】：Is there a way to return parsed data from the fetch API, rather than a promise?有没有办法从 fetch API 返回解析的数据，而不是承诺？
【发布时间】：2018-08-02 06:01:16
【问题描述】：

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

有没有办法构造一个函数，以便它在解析后从 fetch 返回数据，而不是 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);
}

【问题讨论】：

你无法绕过这个问题的异步特性。你可以使用async/await 让它看起来更同步，但它只会让它看起来那样。您还可以返回由fetch 生成的承诺，这将允许您处理showMessages() 中的内容。
同“有没有办法现在打开包裹（并使用它的内容），亚马逊下周发货？”
有趣，谢谢你的回答。我目前正在上课，他们建议我们使用 fetch 但应用程序的要求包括使用 MVC 模式和维护单一责任原则。似乎这对于 fetch 来说是不可能的。

标签： javascript promise fetch

【解决方案1】：

半解决方案

虽然很老套，也许是一种反模式。您可以使用同步请求在页面上预加载该数据，使用：

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)

最后的想法

再次，请不要这样做。但是有办法;)

【讨论】：