โหมดการเขียนโปรแกรมสัญญาเรียกอีกอย่างว่าสามารถเข้าใจได้ซึ่งสามารถเข้าใจได้ว่าเป็นการดำเนินการหลังจากความล่าช้า แต่ละสัญญามีอินเทอร์เฟซที่ไม่ซ้ำกันที่เรียกว่าและเมื่อสัญญาล้มเหลวหรือประสบความสำเร็จมันจะทำให้การโทรกลับ มันแสดงถึงผลการดำเนินการที่อาจทำงานเป็นเวลานานและไม่จำเป็นต้องเสร็จสิ้น รูปแบบนี้ไม่ได้ปิดกั้นและรอให้การดำเนินการระยะยาวเสร็จสมบูรณ์ แต่ส่งคืนวัตถุที่แสดงถึงผลลัพธ์ที่สัญญาไว้
ไลบรารี JavaScript ปัจจุบันจำนวนมาก (เช่น JQuery และ Dojo, AngularJS) เพิ่มสิ่งที่เป็นนามธรรมนี้เรียกว่าสัญญา ผ่านห้องสมุดเหล่านี้นักพัฒนาสามารถใช้โหมดสัญญาในการเขียนโปรแกรมจริง
ด้านล่างเราจะใช้ jQuery เป็นตัวอย่างเพื่อหารือเกี่ยวกับวิธีการที่ไลบรารี JavaScript ใช้โหมดสัญญาเพื่อจัดการการประมวลผลแบบอะซิงโครนัสซึ่งจริง ๆ แล้วเป็นการให้การสนับสนุนที่ทนต่อความผิดพลาดผ่านการโทรกลับ เมื่อการดำเนินการสำเร็จหรือล้มเหลวหรือในกรณีใด ๆ การเรียกกลับที่เกี่ยวข้องจะถูกดำเนินการและพยายามจัดการสถานการณ์ที่เป็นไปได้ใด ๆ ในตรรกะชิ้นหนึ่ง
ก่อนอื่นมาดูกันว่า jQuery ทำงานโดยทั่วไป:
การคัดลอกรหัสมีดังนี้:
var $ info = $ ("#info");
$ .ajax ({
URL: "/echo/json/"
ข้อมูล: {json: json.stringify ({"ชื่อ": "somevalue"})}
ประเภท: "โพสต์",
ความสำเร็จ: ฟังก์ชั่น (การตอบสนอง)
-
$ info.text (response.name);
-
-
ในตัวอย่างนี้คุณจะเห็นว่าเมื่อการตั้งค่าสำเร็จจะมีการระบุการโทรกลับซึ่งเป็นวิธีการโทรกลับที่ดี นี่ไม่ใช่สัญญาและเอกสาร jQuery อย่างเป็นทางการไม่แนะนำวิธีนี้อีกต่อไป (http://api.jquery.com/jquery.ajax/#jqxhr) เมื่อการโทร AJAX เสร็จสิ้นจะดำเนินการฟังก์ชั่นความสำเร็จ ขึ้นอยู่กับการดำเนินการแบบอะซิงโครนัสที่ใช้โดยห้องสมุดคุณสามารถใช้การโทรกลับที่แตกต่างกันได้ (เช่นงานที่ประสบความสำเร็จหรือไม่มันจะถูกเรียกกลับและตอบกลับ) การใช้โหมดสัญญาทำให้กระบวนการนี้ง่ายขึ้นการดำเนินการแบบอะซิงโครนัสจะต้องส่งคืนการโทรกลับ สัญญานี้ช่วยให้คุณเรียกวิธีการที่เรียกจากนั้นให้คุณระบุจำนวนฟังก์ชันของการโทรกลับ
ลองมาดูกันว่า jQuery สร้างสัญญาอย่างไร:
การคัดลอกรหัสมีดังนี้:
var $ info = $ ("#info");
$ .ajax ({
URL: "/echo/json/"
ข้อมูล: {
JSON: json.stringify ({
"ชื่อ": "somevalue"
-
-
ประเภท: "โพสต์"
-
. แล้ว (ฟังก์ชั่น (การตอบสนอง) {
$ info.text (response.name);
-
วัตถุ jQuery Ajax ใช้โหมดสัญญาโดยการส่งคืนวัตถุ XHR ดังนั้นเราจึงสามารถเรียกวิธีการนี้ได้ ข้อดีของการทำเช่นนี้คือคุณสามารถห่วงโซ่โทรและดำเนินการอิสระดังที่แสดงด้านล่าง:
การคัดลอกรหัสมีดังนี้:
var $ info = $ ("#info");
$ .ajax ({
URL: "/echo/json/"
ข้อมูล: {
JSON: json.stringify ({
"ชื่อ": "somevalue"
-
-
ประเภท: "โพสต์"
-
. แล้ว (ฟังก์ชั่น (การตอบสนอง) {
$ info.text (response.name);
-
. แล้ว (ฟังก์ชั่น () {
$ info.append ("... เพิ่มเติม");
-
.DONE (ฟังก์ชั่น () {
$ info.append ("... ในที่สุด!");
-
การดำเนินการแบบอะซิงโครนัสกลายเป็นเรื่องง่ายมากเนื่องจากห้องสมุดหลายแห่งเริ่มใช้โหมดสัญญา แต่ถ้าคุณคิดจากมุมมองตรงกันข้ามสัญญาจะเป็นอย่างไร? หนึ่งในรูปแบบที่สำคัญมากคือฟังก์ชั่นสามารถรับฟังก์ชั่นสองฟังก์ชั่นหนึ่งคือการโทรกลับเมื่อประสบความสำเร็จและอีกอย่างหนึ่งคือการโทรกลับเมื่อล้มเหลว
การคัดลอกรหัสมีดังนี้:
var $ info = $ ("#info");
$ .ajax ({
// เปลี่ยน URL เพื่อดูข้อผิดพลาดเกิดขึ้น
URL: "/echo/json/"
ข้อมูล: {
JSON: json.stringify ({
"ชื่อ": "somevalue"
-
-
ประเภท: "โพสต์"
-
. แล้ว (ฟังก์ชั่น (การตอบสนอง) {
// ความสำเร็จ
$ info.text (response.name);
-
การทำงาน () {
// ความล้มเหลว
$ info.text ("สิ่งเลวร้ายเกิดขึ้นกับนักพัฒนาที่ดี");
-
.ALLY (ฟังก์ชั่น () {
$ info.append ("... ในที่สุด");
-
ควรสังเกตว่าใน jQuery ไม่ว่าจะประสบความสำเร็จหรือล้มเหลวเราจะใช้การโทรเพื่อระบุสิ่งที่เราต้องการโทร
ในความเป็นจริงคุณสามารถเขียนได้ที่นี่ซึ่งเป็นวิธีที่แนะนำในเอกสารอย่างเป็นทางการของ JQuery:
การคัดลอกรหัสมีดังนี้:
var $ info = $ ("#info");
$ .ajax ({
// เปลี่ยน URL เพื่อดูข้อผิดพลาดเกิดขึ้น
URL: "/echo/json/"
ข้อมูล: {
JSON: json.stringify ({
"ชื่อ": "somevalue"
-
-
ประเภท: "โพสต์"
-
.DONE (ฟังก์ชั่น (การตอบสนอง) {
// ความสำเร็จ
$ info.text (response.name);
}). ล้มเหลว (ฟังก์ชั่น () {
// ความล้มเหลว
$ info.text ("สิ่งเลวร้ายเกิดขึ้นกับนักพัฒนาที่ดี");
-
.ALLY (ฟังก์ชั่น () {
$ info.append ("... ในที่สุด");
-
มาดูกันว่า AngularJS ใช้โหมดสัญญาอย่างไร:
การคัดลอกรหัสมีดังนี้:
var m = angular.module ("myapp", []);
M.Factory ("DataService", ฟังก์ชั่น ($ q) {
ฟังก์ชั่น _callme () {
var d = $ q.defer ();
settimeout (function () {
d.resolve ();
//defer.reject ();
}, 100);
ส่งคืน d.promise;
-
กลับ {
callme: _callme
-
-
ฟังก์ชั่น myctrl ($ scope, dataService) {
$ scope.name = "ไม่มี";
$ scope.isbusy = true;
DataService.CallMe ()
. แล้ว (ฟังก์ชั่น () {
// ประสบความสำเร็จ
$ scope.name = "ความสำเร็จ";
-
การทำงาน () {
// ความล้มเหลว
$ scope.name = "ความล้มเหลว";
-
. แล้ว (ฟังก์ชั่น () {
// เหมือนประโยคในที่สุด
$ scope.isbusy = false;
-
-
คุณสามารถลองตัวอย่างเหล่านี้ใน JSFIDDLE และดูว่าจะเกิดผลกระทบใดบ้าง การใช้สัญญาว่าจะใช้งานแบบอะซิงโครนัสเป็นวิธีที่ง่ายมากและยังสามารถทำให้รหัสของคุณง่ายขึ้น มันเป็นวิธีที่ดีในการฆ่านกสองตัวด้วยหินก้อนเดียว
สำหรับการแนะนำเพิ่มเติมและตัวอย่างเกี่ยวกับสัญญาคุณสามารถไปที่เว็บไซต์อย่างเป็นทางการ (http://www.promisejs.org/)