javascript - MVC JavaScript 获取 API 数据并发送到 Controller

Question

我应该如何使用 MVC 获取 API 数据并将其发送到 Controller ？

这是我目前所拥有的:

"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 的数据在前端填充一些元素。

谢谢

Answer 1

您可以使用async 函数发出请求，然后返回结果数据。在 init 函数中，您可以 await 调用 fetchJSON 函数的结果，然后您可以将该数据传递给 appUI

编辑

要在单击按钮时填充 View ，您可以将数据存储在 appData 中，当单击按钮时，您可以从 appData 获取数据并填充 View 。

看下面的例子

const appData = (() => {
  const dataStore = {};
  
  const fetchJSON = async (url) => {
    try {
        let response = await fetch(url);
        return await response.json();
      } catch (error) {
        console.log(error);
      }
  };
  
  return { dataStore, fetchJSON };
})();

const appUI = ((appData) => {
  const btn = document.getElementById('btn');
  
  btn.addEventListener('click', (e) => {
    populateViews(appData.dataStore.data);
  });
  
  const populateViews = (data) => {
    const body = document.getElementsByTagName('body')[0];
    const post = `
        <div>
          <p><strong>Post ID:</strong> ${data.id}</p>
          <p><strong>Title</strong></p>
          <p>${data.title}</p>
          <p><strong>Body</strong></p>
          <p>${data.body}</p>
        </div>
    `;
    body.insertAdjacentHTML('beforeend', post);
  };
  
  return { btn };
})(appData);

const appController = ((appData, appUI) => {
  const init = async () => {
      console.log("Application Initialized...");
      const data = await appData.fetchJSON('https://jsonplaceholder.typicode.com/posts/1');
      appData.dataStore.data = data;
      
      // enable button after data has been saved
      appUI.btn.removeAttribute('disabled');
  };
  
  return { init };
})(appData, appUI);

appController.init();

button {
  padding: 12px 15px;
  background: blueviolet;
  color: #fff;
  border-radius: 4px;
  outline: none;
  box-shadow: 0.1px 0.1px 3px rgba(0, 0, 0, 0.7);
  border: none;
  cursor: pointer;
}

button:disabled {
  background: #999;
  pointer-events: none;
}

div {
  margin-top: 15px;
}

p {
  margin: 5px 0;
}

<button id="btn" disabled>Fetch Data</button>