非同步 JS 訓練一：第2課 ── 認識 promise chain 鏈接

by birdie2019

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<p>尊貴的客戶您好，您上次的消費內容是：</p>
<ul>
  <li class="id"></li>
  <li class="content"></li>
  <li class="amount"></li>
</ul>
<p>希望這次也能有機會服務您！</p>

CSS

ul {
  list-style-type: none;
  padding: 0;
}

JavaScript

$.get("https://codelove.tw/fake-api/get-current-user").then((res) => {
			return $.get("https://codelove.tw/fake-api/get-orders", { user_id: res.data.user.id })
	.then((res) => {
   		return $.get("https://codelove.tw/fake-api/get-order-details", { order_id: res.data.orders.length })
	.then((res) => {
    	$('.id').text(`訂單編號：${res.data.order.id}`);
      $('.content').text(`訂單內容：${res.data.order.content}`);
      $('.amount').text(`訂單金額：${res.data.order.amount}`);  
    });
  });
});