Async Await

Error Handling - Finally

by kulimusoda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="order">
<p>尊貴的客戶您好，您上次的消費內容是：</p>
  <p>訂單編號：<span id="order_id"></span></p>
  <p>訂單內容：<span id="order_content"></span></p>
  <p>訂單金額：$<span id="order_amount"></span></p>
  <p>希望這次也能有機會服務您！</p>
</div>

<div class="overlay">
  <div class="loading">
    <div class="loading-icon"></div>
    <div class="loading-text">讀取中，請稍等...</div>
  </div>
</div>

SCSS

.overlay{
  display:none;
  position:absolute;
  inset:0;
  backdrop-filter:blur(10px);
  &.active{
    display: grid;
    place-items:center;
  }
}

.loading{
  display:grid;
  gap:0.5rem;
  &-icon{
    border:5px solid;
    border-color: #eee #aaa #aaa #aaa;
    width: 32px;
    height: 32px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    justify-self:center;
    animation: 800ms loading linear infinite;
  }
}

@keyframes loading {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

JavaScript

const userApi = 'https://codelove.tw/fake-api/get-current-user-unstable';
const orderApi = 'https://codelove.tw/fake-api/get-orders-unstable';
const detailApi = 'https://codelove.tw/fake-api/get-order-details-unstable';


/* const main = async () => {
  try {
  const data1 = await $.get(userApi);
  const user_id = data1.data.user.id;
  console.log(user_id);
  
  const data2 = await $.get(orderApi,{user_id});
  const order_id = data2.data.orders.at(-1).id;
  console.log(order_id);
  
  const data3 = await $.get(detailApi,{order_id});
  
  $('#order_id').text(data3.data.order.id);
  $('#order_content').text(data3.data.order.content);
  $('#order_amount').text(data3.data.order.amount);
  } catch (err) {
    alert('抱歉，系統出了點問題，請稍後再試一次。');
  }
}

main(); */

async function getOrderData() {

  const overlay = $('.overlay');
  overlay.addClass('active');

  try {
    const data1 = await $.get(userApi);
    const user_id = data1.data.user.id;

    const data2 = await $.get(orderApi, {
      user_id
    });
    const order_id = data2.data.orders.at(-1).id;

    const data3 = await $.get(detailApi, {
      order_id
    });
    const {
      id,
      content,
      amount
    } = data3.data.order;

    $('#order_id').text(id);
    $('#order_content').text(content);
    $('#order_amount').text(amount);
  } catch (err) {
    alert('抱歉，系統出了點問題，請稍後再試一次。')
  } finally{
    overlay.removeClass('active');
  }
}

document.addEventListener('DOMContentLoaded',getOrderData);