13-api-fetch.html

<div class="breadcrumb">
  <span class="breadcrumb-link" onclick="loadLesson('intro')">หน้าแรก</span> / <span>API & Fetch</span>
</div>

<h2>API & Fetch — ดึงข้อมูลจาก API สาธารณะ</h2>

<p>ในบทนี้เราจะใช้งาน <code>fetch</code> เพื่อดึงข้อมูลจาก API สาธารณะ (เช่น JSONPlaceholder) และแสดงผลบนหน้าเว็บด้วย async/await</p>

<h3>ตัวอย่าง (fetch)</h3>
<pre><code class="language-html">
&lt;ul id=&quot;posts&quot;&gt;&lt;/ul&gt;&#13;
&lt;script&gt;
async function loadPosts(){
    try {
        const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=6');
        const posts = await res.json();
        const list = document.getElementById('posts');
        list.innerHTML = posts.map(p => `&lt;li&gt;&lt;strong&gt;${p.title}&lt;/strong&gt;&lt;p&gt;${p.body}&lt;/p&gt;&lt;/li&gt;`).join('');
    } catch (e) {
        console.error(e);
    }
}

loadPosts();
&lt;/script&gt;
</code></pre>