Day24 - 抽取 js 共用元件

Case01

与 Day23 范例的差异，就是把 js fetch 的语法 extract 成 function

CustomFetch.js

• 除了把原本的语法 extract 出来，额外再加上 .catch()，来达到基本的共用处理逻辑 !

  window.CustomFetch = {};
  CustomFetch.PostJson = function (url, data) {
    return fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        RequestVerificationToken: Antiforgery.RequestVerificationToken,
      },
      body: JSON.stringify(data),
    })
      .then((response) => response.json())
      .catch((error) => console.log(error));
  };
  

View

• 引用 CustomFetch.js

  因为 CustomFetch 里面会呼叫 Antiforgery 物件资料
  依照我个人习惯
  我会把 CustomFetch 的引用，放在 引用 Antiforgery 的下方 !

  ...
  
  <partial name="_Antiforgery" />
  <script src="/lib/CustomFetch.js?20210608001"></script>
  
  ...
  

• 把原本 fetch 的语法，改为呼叫 CustomFetch.PostJson(url, request_body).then() 的语法

  ...
      <script>
        const app = createApp({
          setup(){
  
  ...
  
            const calculate = function () {
                CustomFetch.PostJson(calculate_url, vue_model.value)
                          .then(data => update_vue_model(data));
            }
  
  ...
  
            const submit_form = function() {
                CustomFetch.PostJson(post_url, vue_model.value)
                          .then(data => update_vue_model(data));
            }
  
  ...
  

有兴趣的人，也可以试试改用 partial view 的方式，来呼叫 js 共用元件
就像 Antifogery 那样 !

这篇先到这里，下一篇来看看整合 jQuery UI 的部份 !