Async Await

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 id="order_id"></span></p>
  <p>訂單內容：<span id="order_content"></span></p>
  <p>訂單金額：$<span id="order_amount"></span></p>
  <p>希望這次也能有機會服務您！</p>
</div>

JavaScript

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

/* const main = async()=>{
const data1 = await $.get(userApi);
const user_id = data1.data.user.id;

const data2 = await $.get(orderApi,{user_id : user_id});
const order_id = data2.data.orders.at(-1).id;

const data3 = await $.get(detailApi,{order_id: order_id});

console.log(data3.data);
orderId.text(data3.data.order.id);
orderContent.text(data3.data.order.content);
orderAmount.text(data3.data.order.amount);
};

main(); */

const main = async () => {
  try {
	const data1 = await $.get(userApi);
  const user_id = data1.data.user.id;
  /* console.log(user_id); */
  
  const data2 = await $.get(orderApi,{user_id});
  const order_id = data2.data.orders.at(-1).id;
  /* console.log(order_id); */
  
  const data3 = await $.get(detailApi,{order_id});
  
  $('#order_id').text(data3.data.order.id);
  $('#order_content').text(data3.data.order.content);
  $('#order_amount').text(data3.data.order.amount);
  } catch (err) {
    alert('抱歉，系統出了點問題，請稍後再試一次。');
  }
}

main();