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'

async function fetchOrderDetails() {
  try {
    const userData = await $.get(getUserAPI, {});
    const userId = userData.data.user.id;

    const ordersData = await $.get(getOrdersAPI, { user_id: userId });
    const orderId = ordersData.data.orders.at(-1).id;

    // 故意搜尋一個不存在的 orderId
    // const orderId = 88888888888888888888888;

    const orderDetailsData = await $.get(getOrderDetailsAPI, { order_id: orderId });

    orderIdDOM.text(orderDetailsData.data.order.id);
    orderContentDOM.text(orderDetailsData.data.order.content);
    orderAmountDOM.text(orderDetailsData.data.order.amount);
  } catch (error) {
    console.error("An error occurred:", error);
  } finally {
    loadingDOM.text('done');
  }
}

fetchOrderDetails().then(() => {
  console.log("fetchOrderDetails has completed.");
});