Promise Chain

Error Handling

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

/* $.get(userApi).then((data) => {
  console.log(data.data.user.id);
  return $.get(orderApi, {
    user_id: data.data.user.id
  })
}).then((data) => {
  console.log(data.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);
}) */

$.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('抱歉，系統出了點問題，請稍後再試一次。');
})