JSFiddle - React, Tailwind, and code Playground

by jason60810

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<div>
  <p class="loading">loading...</p>
  <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 orderIdDOM = $('.order_id')
const orderContentDOM = $('.order_content')
const orderAmountDOM = $('.order_amount')
const loadingDOM = $('.loading');

const getUserAPI = 'https://codelove.tw/fake-api/get-current-user'
const getOrdersAPI = 'https://codelove.tw/fake-api/get-orders'
const getOrderDetailsAPI = 'https://codelove.tw/fake-api/get-order-details'

const nativePromise = Promise.resolve($.get(getUserAPI, {}));

nativePromise.then(({
    data
  }) => {
    const userId = data.user.id;
    return $.get(getOrdersAPI, {
      user_id: userId
    })
  }).then(({
    data
  }) => {
    const orderId = data.orders.at(-1).id
    // 故意搜尋一個不存在的 orderId
   /*  const orderId = 88888888888888888888888 */
    return $.get(getOrderDetailsAPI, {
      order_id: orderId
    })
      }).then(({
    data
      }) => {
    orderIdDOM.text(data.order.id)
    orderContentDOM.text(data.order.content)
    orderAmountDOM.text(data.order.amount)
      })
  .catch((error) => {
    console.error("An error occurred:", error);
  })
  .finally(() => {
    loadingDOM.text('done');
  });