คำนำ
บริการ $ http: มันเพียงแค่ห่อหุ้มวัตถุ XMLHttpRequest ดั้งเดิมของเบราว์เซอร์และรับพารามิเตอร์ พารามิเตอร์นี้เป็นวัตถุที่มีเนื้อหาการกำหนดค่าที่ใช้ในการสร้างคำขอ HTTP ฟังก์ชั่นนี้ส่งคืนวัตถุ promise ด้วยวิธีการ success และ error
ใช้สถานการณ์ของบริการ $ http:
var promise = $ http ({วิธี: "post", // สามารถรับ, โพสต์, ใส่, ลบ, หัว, jsonp; ที่ใช้กันทั่วไปคือ get, posturl: "./ data.json", // คำขอพา ธ พารามิเตอร์: 'ชื่อ': 'lisa'} คำขอส่งข้อมูลไบนารีและใช้วัตถุ Blob}). ความสำเร็จ (ฟังก์ชั่น (ข้อมูล) {// การตอบสนองสำเร็จการดำเนินการ}) ข้อผิดพลาด (ฟังก์ชั่น (ข้อมูล) {// การตอบสนองล้มเหลว (การตอบกลับส่งคืนในสถานะข้อผิดพลาด) การดำเนินการ}) then() ฟังก์ชั่น: คุณสามารถใช้ฟังก์ชั่น then() เพื่อจัดการการโทรกลับของบริการ $ http ฟังก์ชั่น then() รับฟังก์ชั่นเสริมสองฟังก์ชั่นเป็นพารามิเตอร์เพื่อแสดงการประมวลผลเมื่อ success หรือสถานะ error นอกจากนี้คุณยังสามารถใช้ success และการโทรกลับ error แทน:
then(successFn, errFn, notifyFn) ไม่ว่า promise จะประสบความสำเร็จหรือล้มเหลวเมื่อผลลัพธ์พร้อมใช้งาน then เรียก successFn หรือ errFn แบบอะซิงโครนัสทันที วิธีนี้จะเรียกฟังก์ชันการโทรกลับด้วยพารามิเตอร์หนึ่งตัว: ผลลัพธ์หรือเหตุผลในการปฏิเสธ
ก่อนที่ promise จะถูกดำเนินการหรือปฏิเสธการเรียกกลับ notifyFn อาจถูกเรียกว่า 0 ถึงหลายครั้งเพื่อให้พร้อมท์สำหรับสถานะกระบวนการ
Promise. แล้ว (ฟังก์ชั่น (resp) {// เรียกว่าเมื่อการตอบสนองสำเร็จการตอบสนองคือวัตถุตอบสนอง}, ฟังก์ชั่น (resp) {// เรียกว่าเมื่อการตอบสนองล้มเหลว, resp มีข้อความแสดงข้อผิดพลาด}); ฟังก์ชั่น Resp (Response) ที่ได้รับจาก then() มี 5 คุณสมบัติ:
1. ข้อมูล (สตริงหรือวัตถุ): ร่างกายตอบสนอง
2. สถานะ: รหัสสถานะ HTTP ที่สอดคล้องกันเช่น 200
3. ส่วนหัว (ฟังก์ชั่น): ฟังก์ชั่น getter ที่มีข้อมูลส่วนหัวซึ่งสามารถยอมรับพารามิเตอร์เพื่อรับค่าของชื่อที่เกี่ยวข้อง
4. config (วัตถุ): สร้างวัตถุการตั้งค่าที่สมบูรณ์ของคำขอดั้งเดิม
5. StateTustext: ข้อความสถานะ HTTP ที่สอดคล้องกันเช่น "ตกลง"
หรือใช้วิธี success/error ใช้
// ประสบความสำเร็จในการจัดการ Promise.success (ฟังก์ชั่น (ข้อมูลสถานะส่วนหัวการกำหนดค่า) {// การประมวลผลการตอบสนองที่ประสบความสำเร็จ}); // การจัดการข้อผิดพลาด Promise.error (ฟังก์ชั่น (ข้อมูล, สถานะ, ส่วนหัว, การกำหนดค่า) {// การประมวลผลการตอบสนองที่ไม่ประสบความสำเร็จ});ตัวอย่างการใช้งาน:
index.html
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> $ http คำขอการทดสอบ </title> <script src = "../ js/angular.js"> </script> <script src = "app.js" data-ng-controller = "myappcontroller" data-ng-init = "loaddata ()"> <bont> <thead> <tr> <th> ชื่อ </th> <th> คุณสมบัติ </th> </tr> </tbody> <tbody> <td> {{data.attr}} </td> </tr> </tbody> </table> </div> </body> </html>app.js
var myhttpapp = angular.module ("myapp", []); myhttpapp.controller ("MyAppController", ฟังก์ชั่น ($ q, $ http, $ scope) {var deffer = $ q.defer (); $ http ({วิธีการ: "โพสต์", url: "./ data.json", แคช: จริง}). ความสำเร็จ (ฟังก์ชั่น (ข้อมูล) {deffer.resolve (data);}). ข้อผิดพลาด (ฟังก์ชั่น (ข้อมูล) {deffer.reject (data);}) /*promise.success (ฟังก์ชั่น (data) {$ spope.mydata = data;})* /}})data.json
[{"Name": "Zhangsan", "attr": "China"}, {"Name": "Lisa", "attr": "USA"}, {"Name": "Bob", "attle": "uk"}, {"ชื่อ": "Jecy"ผลลัพธ์:
วัตถุ resp ส่งคืนเมื่อเรียกฟังก์ชัน then() :
สรุป
แอปพลิเคชันที่ใช้กันทั่วไปและพารามิเตอร์ของบริการ $ http ใน AngularJs นั้นมีอยู่เหนือกว่า ฉันหวังว่าเนื้อหาของบทความนี้จะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การใช้ AngularJS หากคุณมีคำถามใด ๆ โปรดฝากข้อความเพื่อสื่อสาร