Angular คือ ตอนที่ 13 : สร้างคำขอ HTTP (HTTP Requests)

01มิ.ย. 2023 by รับทำแอพ สบายไอที

ทำความเข้าใจเกี่ยวกับบริการ (Service) $http
สร้างคำขอ GET
คำขอโพสต์ (POST Requests)
การกำหนดค่าคำขอ HTTP
การจัดการการตอบสนอง
การทำงานกับข้อมูล JSON
การจัดการข้อผิดพลาด (Error Handling)

เมื่อทำเว็บ Angular และทำแอพแบบไดนามิก ความสามารถในการดึงข้อมูลจากเซิร์ฟเวอร์เป็นทักษะที่สำคัญ ในฐานะที่เป็นส่วนหนึ่งของเฟรมเวิร์ก AngularJS $http บริการนี้มอบวิธีที่มีประสิทธิภาพในการสื่อสารกับเซิร์ฟเวอร์ ทำให้ใช้งานคำขอ HTTP และจัดการการตอบสนองได้ง่ายขึ้น

1. ทำความเข้าใจเกี่ยวกับบริการ (Service) $http

บริการ ของ AngularJS $http เป็นบริการหลักของ AngularJS ที่อำนวยความสะดวกในการสื่อสารกับเซิร์ฟเวอร์ HTTP ระยะไกลผ่านวัตถุ XMLHttpRequest ของเบราว์เซอร์หรือผ่าน JSONP โดยมีชุดของวิธีการดำเนินการตามคำขอ HTTP เช่น GET, POST, PUT, DELETE และอื่นๆ

เมธอดเหล่านี้ส่งคืนค่า Promise ที่เราสามารถใช้เพื่อจัดการการตอบสนอง HTTP ซึ่งหมายความว่าเราสามารถใช้ .then() วิธีระบุว่าจะเกิดอะไรขึ้นเมื่อสัญญาแก้ไข (คำขอ HTTP สำเร็จ) และสิ่งที่จะเกิดขึ้นเมื่อสัญญาถูกปฏิเสธ (คำขอ HTTP ล้มเหลว)

2. สร้างคำขอ GET

คำขอ HTTP ประเภทหนึ่งที่พบบ่อยที่สุดคือ GET คำขอ ใช้เพื่อดึงข้อมูลจากทรัพยากรที่ระบุ ใน AngularJS คุณสามารถส่ง GET คำขอดังนี้:

$http.get('http://example.com/api/data').then(function(response) {
    $scope.data = response.data;
}, function(error) {
    console.log(error);
});

ในตัวอย่างนี้ เรากำลังดึงข้อมูล http://example.com/api/data จาก หากคำขอสำเร็จ ข้อมูลจากการตอบกลับจะถูกกำหนดให้ $scope.data กับ หากคำขอล้มเหลว เรากำลังบันทึกข้อผิดพลาดไปยังคอนโซล

3. คำขอโพสต์ (POST Requests)

POST คำขอใช้เพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์เพื่อสร้างทรัพยากรใหม่ ใน AngularJS คุณอาจส่ง POST คำขอดังนี้:

var data = {
    title: 'My Post',
    content: 'This is my first post!'
};

$http.post('http://example.com/api/posts', data).then(function(response) {
    console.log(response.data);
}, function(error) {
    console.log(error);
});

ในกรณีนี้ เรากำลังส่งโพสต์ใหม่ไป http://example.com/api/posts ที่ หากคำขอสำเร็จ ข้อมูลตอบกลับจะถูกบันทึกลงในคอนโซล หากล้มเหลว ข้อผิดพลาดจะถูกบันทึกแทน

4. การกำหนดค่าคำขอ HTTP

นอกจากการระบุวิธีการและ URL สำหรับคำขอแล้ว $http บริการนี้ยังช่วยให้เราสามารถกำหนดค่าคำขอได้หลายวิธี ตัวอย่างเช่น เราสามารถตั้งค่าส่วนหัว ขีดจำกัดการหมดเวลา และอื่นๆ

$http({
    method: 'POST',
    url: 'http://example.com/api/posts',
    headers: {
       'Content-Type': 'application/json'
    },
    data: {
        title: 'My Post',
        content: 'This is my first post!'
    },
    timeout: 5000
}).then(function(response) {
    console.log(response.data);
}, function(error) {
    console.log(error);
});

ในตัวอย่างนี้ เราได้เพิ่ม Content-Type ส่วนหัวให้กับคำขอและตั้งค่าการหมดเวลาเป็น 5,000 มิลลิวินาที

5. การจัดการการตอบสนอง

การตอบสนอง HTTP ใน AngularJS สามารถมีข้อมูลต่างๆ ที่อาจมีความสำคัญต่อการทำงานของแอปพลิเคชันของคุณ บริการ$httpมีคุณสมบัติหลักบางประการเพื่อจัดการกับการตอบสนองเหล่านี้

วัตถุตอบสนองมีคุณสมบัติดังต่อไปนี้:

data: นี่คือเนื้อหาการตอบสนองที่แท้จริง โดยสามารถอยู่ในรูปแบบของวัตถุ JSON สตริง หรือรูปแบบข้อมูลใดๆ ที่ส่งคืนโดยเซิร์ฟเวอร์
status: นี่คือโค้ดสถานะ HTTP ของการตอบกลับ เช่น 200 สำหรับคำขอที่สำเร็จหรือ 404 หากไม่พบทรัพยากรที่ร้องขอ
headers: ฟังก์ชันเพื่อรับส่วนหัว HTTP อย่างน้อยหนึ่งรายการจากการตอบกลับ หากคุณเรียกใช้ฟังก์ชันนี้โดยไม่มีอาร์กิวเมนต์ ฟังก์ชันจะส่งคืนวัตถุที่มีส่วนหัวทั้งหมด หากคุณให้อาร์กิวเมนต์ มันจะส่งกลับค่าของส่วนหัวเฉพาะนั้น
config: วัตถุการกำหนดค่าดั้งเดิมที่ใช้เพื่อสร้างคำขอ ซึ่งรวมถึงวิธีการ URL ส่วนหัว และตัวเลือกการกำหนดค่าอื่นๆ
statusText: ข้อความสถานะ HTTP ของการตอบกลับ เช่น “OK” สำหรับการตอบกลับ 200 หรือ “Found” สำหรับการตอบกลับ 404

มาดูวิธีใช้คุณสมบัติเหล่านี้ในการจัดการการตอบสนอง HTTP:

$http.get('http://example.com/api/data').then(function(response) {
    console.log("Status: ", response.status);
    console.log("Data: ", response.data);
    console.log("Status Text: ", response.statusText);
}, function(error) {
    console.log("Error: ", error);
});

ในตัวอย่างนี้ หากคำขอ HTTP สำเร็จ สถานะ ข้อมูล และข้อความแสดงสถานะของการตอบกลับจะถูกบันทึกลงในคอนโซล หากคำขอ HTTP ล้มเหลว ข้อผิดพลาดจะถูกบันทึกไปยังคอนโซล

6. การทำงานกับข้อมูล JSON

เมื่อทำงานกับ API โดยเฉพาะอย่างยิ่งเมื่อทำเว็บ Angular และทำแอพคุณมักจะต้องจัดการกับข้อมูล JSON บริการ$httpจะแปลงข้อมูล JSON เป็นวัตถุ JavaScript ให้คุณโดยอัตโนมัติ ลองพิจารณาตัวอย่างที่เราดึงรายชื่อผู้ใช้จาก API และแสดงในแอปพลิเคชัน AngularJS ของเรา:

$http.get('http://example.com/api/users').then(function(response) {
    $scope.users = response.data;
}, function(error) {
    console.log(error);
});

ในกรณีนี้ response.data เป็นอาร์เรย์ JavaScript ของวัตถุผู้ใช้ที่เราสามารถใช้ได้โดยตรงในแอปพลิเคชัน AngularJS ของเรา

7. การจัดการข้อผิดพลาด (Error Handling)

ในโลกแห่งความเป็นจริง ไม่ใช่ทุกคำขอ HTTP จะสำเร็จ อาจมีปัญหาเกี่ยวกับเซิร์ฟเวอร์ เครือข่ายล้มเหลว หรือคำขอของเราอาจไม่ถูกต้อง นี่คือที่มาของการจัดการข้อผิดพลาด เมื่อคำขอล้มเหลว สัญญาจะถูกปฏิเสธและฟังก์ชันเรียกกลับข้อผิดพลาดจะถูกดำเนินการ:

$http.get('http://example.com/api/data').then(function(response) {
    $scope.data = response.data;
}, function(error) {
    console.error("Error occurred: ", error);
});

ในตัวอย่างนี้ หากคำขอ HTTP ล้มเหลว ข้อความแสดงข้อผิดพลาดจะถูกบันทึกไปยังคอนโซล สิ่งนี้สามารถปรับปรุงเพื่อแสดงข้อความแสดงข้อผิดพลาดที่เป็นมิตรต่อผู้ใช้ในแอปพลิเคชัน หรือเพื่อลองคำขออีกครั้ง

บริการ นี้$httpเป็นเครื่องมืออันทรงพลังในเฟรมเวิร์ก AngularJS สำหรับทำเว็บ Angular และทำแอพที่สามารถโต้ตอบกับเซิร์ฟเวอร์โดยใช้ HTTP การอนุญาตให้คุณสร้างคำขอ HTTP และจัดการการตอบสนองโดยตรงจากโค้ด AngularJS ของคุณ จะช่วยอำนวยความสะดวกในการทำเว็บ Angular และทำแอพแบบไดนามิกที่ขับเคลื่อนด้วยข้อมูล

สิ่งสำคัญคือต้องจำไว้ว่าการสร้างคำขอ HTTP และการจัดการการตอบสนองเป็นส่วนสำคัญในการทำเว็บ Angular และทำแอพ เมื่อทำความเข้าใจและใช้ $http บริการอย่างมีประสิทธิภาพ คุณจะสามารถทำเว็บ Angular และทำแอพที่แข็งแกร่ง มีประสิทธิภาพ และเป็นมิตรกับผู้ใช้มากขึ้น