Callback hell

Error Handing

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>

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

$.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);
          },
          error: (res) => {
            alert('讀取訂單細節失敗，請稍後再試一次。');
          }
        })
      },
      error: (res) => {
        alert('讀取訂單列表失敗，請稍後再試一次。');
      }
    })
  },
  error: (res) => {
    alert('讀取用戶失敗，請稍後再試一次。');
  }
})