พื้นฐานการทำงานกับ fetch ใน AJAX

ตอนนี้มาดูวิธีโหลดบางส่วนของหน้าด้วย AJAX กัน สมมติว่าบนหน้า index.html ของเรามี div และปุ่ม (นี่คือเนื้อหาของ body):

public/index.html<div></div>
<button>click me</button>

สมมติว่าเรามีหน้า ajax.html ด้วย ซึ่งมีสามย่อหน้า (ไม่มีแท็กหน้า เพียงแค่าย่อหน้า):

public/ajax.html<p>1</p>
<p>2</p>
<p>3</p>

มาทำให้เมื่อคลิกที่ปุ่ม บนหน้า index.html เนื้อหาของหน้า ajax.html จะถูกโหลดลงใน div

ในการทำเช่นนี้ ก่อนอื่นต้องรับลิงก์ไปยังองค์ประกอบของเรา ลงในตัวแปร:

public/client.jslet div    = document.querySelector('div');
let button = document.querySelector('button');

มาติดตั้งตัวจัดการการคลิกบนปุ่ม:

public/client.jsbutton.addEventListener('click', function() {
  // เราจะดำเนินการร้องขอ AJAX ที่นี่
});

ตอนนี้เรามาดำเนินการร้องขอ AJAX กัน สำหรับสิ่งนี้ใช้ฟังก์ชัน fetch รับพารามิเตอร์เป็นที่อยู่ของหน้าที่เราต้องการรับเนื้อหา ลองระบุที่อยู่ของหน้า ajax.html บนเซิร์ฟเวอร์ของเรา:

public/client.jsbutton.addEventListener('click', function() {
  let result = fetch('/ajax.html'); 
});

fetch จะคืนค่า promise เป็นผลลัพธ์ของมัน ความจริงก็คือการร้องขอหน้าผ่าน AJAX - นี่คือการดำเนินการแบบอะซิงโครนัส เพราะมันจะใช้ เวลาบ้างหลังจากนั้นหน้าจะตอบสนองต่อเรา

มารับผลลัพธ์ของ promise:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // คำตอบของเซิร์ฟเวอร์อยู่ในตัวแปร response
  });
});

ทำให้ง่ายขึ้นโดยกำจัดตัวแปรที่ไม่จำเป็น:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(function(response) {
    
  });
});

ทำให้ง่ายขึ้นโดยใช้ฟังก์ชันลูกศร:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    
  });
});

นำเสนอในรูปแบบที่อ่านง่ายขึ้น:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      
    }
  );
});

ในตัวแปร response มีอยู่ค่อนข้าง ซับซ้อนเป็นวัตถุของคลาส Response:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    console.log(response); // วัตถุของคลาส Response
  });
});

เราจะศึกษาโครงสร้างลึกของวัตถุนี้ใน บทเรียนต่อไป และตอนนี้เราต้องการสิ่งที่ง่ายที่สุด - รับข้อความของหน้าที่ร้องขอ สำหรับ สิ่งนี้ในวัตถุนี้มีเมธอด text อย่างไรก็ตาม เมธอดนี้ไม่ได้คืนค่าข้อความของหน้า แต่คืนค่า promise พร้อมกับข้อความของมัน:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      console.log(response.text()); // แสดง Promise
    }
  );
});

เพื่อให้ได้ข้อความของหน้า จำเป็นต้อง ประมวลผล promise ที่ได้รับจาก response.text อีกครั้ง:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text); // ข้อความของหน้า
    }
  );
});

ดังนั้น ในที่สุดเราก็ได้รับข้อความของหน้าที่ร้องขอ และสามารถ ตัวอย่างเช่น เขียนมันลงใน div ของเรา:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      div.innerHTML = text;
    }
  );
});