Callback hell

Error handing - Complete

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-text">讀取中，請稍等...</div>
</div>

SCSS

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

JavaScript

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

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

function getOrderDetails() {

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

  $.ajax({
    url: userApi,
    success: (res) => {
      const user_id = res.data.user.id;

      $.ajax({
        url: orderApi,
        data: {
          user_id
        },
        success: (res) => {
          const order_id = res.data.orders.at(-1).id;

          $.ajax({
            url: detailApi,
            data: {
              order_id
            },
            success: (res) => {
              orderId.text(res.data.order.id);
              orderContent.text(res.data.order.content);
              orderAmount.text(res.data.order.amount);

              overlay.removeClass('active');
            },
            error: (err) => {
              alert('讀取訂單細節失敗，請稍後再試一次。');
            },
            complete: () => {
              overlay.removeClass('active');
            }
          })
        },
        error: (err) => {
          alert('讀取訂單列表失敗，請稍後再試一次。');
        }
      })
    },
    error: (err) => {
      alert('讀取用戶失敗，請稍後再試一次。');
    },
  })
}


getOrderDetails();


/* $.ajax({
  url: userApi,
  success: (res) => {
    console.log(res.data);
    $.ajax({
      url: orderApi,
      data: {
        user_id: res.data.user.id
      },
      success: (res) => {
        console.log(res.data);
        $.ajax({
          url: detailApi,
          data: {
            order_id: res.data.orders.at(-1).id
          },
          success: (res) => {
            console.log(res.data);
            orderId.text(res.data.order.id);
            orderContent.text(res.data.order.content);
            orderAmount.text(res.data.order.amount);
    ...