Promise Chain

Error Handing - Always

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 class="order-id"></span></p>
  <p>訂單內容：<span class="order-content"></span></p>
  <p>訂單金額：$<span class="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>

<button id="reload">重新載入</button>

SCSS

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

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

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

JavaScript

const orderId = $('.order-id');
const orderContent = $('.order-content');
const orderAmount = $('.order-amount');
const reload = $('#reload');

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';

/* $.get(userApi).then((data) => {
  return $.get(orderApi, {
    user_id: data.data.user.id
  })
}).then((data) => {
  return $.get(detailApi, {
    order_id: data.data.orders.at(-1).id
  })
}).then((data) => {
  console.log(data.data);
  orderId.text(data.data.order.id);
  orderContent.text(data.data.order.content);
  orderAmount.text(data.data.order.amount);
}).catch((error) => {
  alert('抱歉，系統出了點問題，請稍後再試一次。');
}) */

function getOrderData() {
  const overlay = $('.overlay');
  overlay.addClass('active');

  $.get(userApi).then(res => {
    const user_id = res.data.user.id;
    console.log(user_id);
    return $.get(orderApi, {
      user_id
    });
  }).then(res => {
    const order_id = res.data.orders.at(-1).id;
    console.log(order_id);
    return $.get(detailApi, {
      order_id
    });
  }).then(res => {
    console.log(res.data.order);
    const {id,content,amount} = res.data.order;
    orderId.text(id);
    orderContent.text(content);
    orderAmount.text(amount);
  }).catch(err => {
    alert('抱歉，系統出了點問題，請稍後再試一次。');
  }).always(() => {
    overlay.removeClass('active');
  })

}

reload.click(getOrderData);

getOrderData();