Async Await

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';
const orderApi = 'https://codelove.tw/fake-api/get-orders';
const detailApi = 'https://codelove.tw/fake-api/get-order-details';

/* $.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);
}) */

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();