非同步 JS 訓練二：第1課 ── 認識 callback hell 與錯誤處理

認識 callback hell 與錯誤處理

by hung19091

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

尊貴的客戶您好，您上次的消費內容是：
<p />
訂單編號：<span id="id" />
<p />
訂單內容：<span id="content" />
<p />
訂單金額：<span id="amount" />
<p />
希望這次也能有機會服務您！
<p />

JavaScript

$.ajax({
  url: "https://codelove.tw/fake-api/get-current-user-unstable",
  data: {},
  success: (res) => {
    $.ajax({
      url: "https://codelove.tw/fake-api/get-orders-unstable",
      data: {
        user_id: res.data.user.id
      },
      success: (res) => {
        $.ajax({
          url: "https://codelove.tw/fake-api/get-order-details-unstable",
          data: {
            order_id: res.data.orders.length
          },
          success: (res) => {
            $('#id').text(res.data.order.id);
            $('#content').text(res.data.order.content);
            $('#amount').text(res.data.order.amount);
          },
          error: (res) => {
            alert('讀取訂單細節失敗，請稍後再試一次。');
          },
        });
      },
      error: (res) => {
        alert('讀取訂單列表失敗，請稍後再試一次。');
      },
    });
  },
  error: (res) => {
    alert('讀取用戶失敗，請稍後再試一次。');
  },
});