MVC JavaScript获取API数据并发送给控制器

我应该如何使用MVC获取API数据并将其发送给控制器

以下是我到目前为止的情况：

"use strict";

const appData = (() => {
  return {
    fetchJSON: url => {
      fetch(url).then(response => {
        if (response.status !== 200) {
          console.log(response.status);
          return;
        }
        response.json().then(data => {
          console.log(data);
          //Send data to controller
        });
      });
    }
  };
})();

const appUI = (() => {

  return {
  };
})();

const appController = ((appData, appUI) => {
  //Get data from appData.fetchJSON()

  return {
    init: () => {
      console.log("Application Initialized...");
      appData.fetchJSON("./data.json");
    }
  };
})(appData, appUI);

appController.init();

其思想是使用API中的数据填充前端上的某些元素

---

谢谢

您可以使用

async

函数发出请求，然后返回结果数据。在

init

函数中，您可以

等待调用
fetchJSON
函数的结果，然后将该数据传递给
appUI

编辑
要在单击按钮时填充视图，可以将数据存储在
appData
中，单击按钮时，可以从
appData
获取数据并填充视图

见下面的例子


const-appData=（（）=>{
常量数据存储={}；
const fetchJSON=async（url）=>{
试一试{
let response=等待获取（url）；
return wait response.json（）；
}捕获（错误）{
console.log（错误）；
}
};
返回{dataStore，fetchJSON}；
})();
常量appUI=（（appData）=>{
const btn=document.getElementById（'btn'）；
btn.addEventListener（'单击'，（e）=>{
PopulateView（appData.dataStore.data）；
});
常量populateViews=（数据）=>{
const body=document.getElementsByTagName（'body'）[0]；
常数桩=`
帖子ID:${data.ID}

标题

${data.title}

身体

${data.body}

`;
body.insertAdjacentHTML（'beforeed'，post）；
};
返回{btn}；
})（appData）；
常量appController=（（appData，appUI）=>{
const init=async（）=>{
log（“应用程序已初始化…”）；
const data=await appData.fetchJSON（'https://jsonplaceholder.typicode.com/posts/1');
appData.dataStore.data=数据；
//保存数据后启用按钮
appUI.btn.removeAttribute（'disabled'）；
};
返回{init}；
})（appData，appUI）；
appController.init（）
按钮{
填充：12px 15px；
背景：蓝紫罗兰；
颜色：#fff；
边界半径：4px；
大纲：无；
盒影：0.1px 0.1px 3px rgba（0,0,0,0.7）；
边界：无；
光标：指针；
}
按钮：禁用{
背景：#999；
指针事件：无；
}
div{
边缘顶部：15px；
}
p{
保证金：5px0；
}
获取数据
回答得很好。我得到了
Uncaught SyntaxError:await仅在
const data=await-appData.fetchJSON（“”）上的异步函数中有效。我确实在
fetchURL
函数中添加了
async
。您认为这是为什么？正如错误消息告诉您的，您只能在
async
函数中使用
wait
关键字。您正在两个函数中使用
wait
关键字，
fetchJSON
和
init
。确保两者都是
async
函数。您可能没有在@yousaf上创建
init
function
async
Spot。我有一个问题的第二部分，我过分简化了我的处境，又陷入困境了？基本上，我还需要通过单击按钮调用appUI.populateViews（）
。不过，我正在努力传递
数据。我应该用第二部分来编辑这个问题吗？