有没有一种方法可以从fetch API返回解析后的数据，而不是承诺

Question

我正在构建一个应用程序，该应用程序使用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);
}

Answer 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)

最后的想法

再说一遍，请不要这样做。但是有办法；(