3 วิธีในการเขียนโค้ดอะซิงโครนัสใน JavaScript

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

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

ทำความรู้จักกับวิธีใช้อย่างถูกต้อง ฟังก์ชันใน JavaScript ถูกเปิดใช้งานตามลำดับที่เรียกว่า ไม่ใช่ตามลำดับคำจำกัดความ

0. กระแสปกติ

พิจารณาตัวอย่างนี้สำหรับคำสั่งดำเนินการปกติ:

function displayFunc(content) {
    console.log(content);
}

function firstFunc() {
    displayFunc("Hello");
}

function secondFunc() {
    displayFunc("... and a good night!");
}

firstFunc();
secondFunc();

หากคุณรัน JavaScript คอนโซลจะพิมพ์วลีHelloนั้นออกมา จากนั้น… and a good night!.

ซึ่งหมายความว่าฟังก์ชั่นได้รับการดำเนินการเป็นครั้งแรกแล้วfirstFunc()secondFunc()

แต่คุณอยู่ที่นี่เพื่อมีอิทธิพลต่อลำดับการเรียกฟังก์ชัน วิธีแรกในการทำเช่นนี้คือการใช้ฟังก์ชันเรียกกลับ

1. โทรกลับ

เข้ามาเหมือนค้อนทุบเพื่อแทรกแซงโฟลว์การควบคุมโดยใช้การเรียกกลับ

การเรียกกลับเป็นฟังก์ชันที่ฟังก์ชันอื่นสามารถส่งผ่านเป็นพารามิเตอร์ได้ ช่วยให้คุณสามารถเรียกใช้ฟังก์ชันอื่นโดยใช้ฟังก์ชันเดียวได้

ในรายการต่อไปนี้ ทำได้เมื่อใช้ตัวอย่างของฟังก์ชันในการคำนวณผลรวม ( calcFunc()):

function displayFunc(content) {
    console.log(content);
}

function calcFunc(p1, p2, displayFunc) {
    let result = p1 + p2;
    displayFunc(result);
}

calcFunc(58, 2, displayFunc);
  1. แยกการแสดงผลการคำนวณออกจากการคำนวณเอง
  2. มีdisplayFunc()การใช้งานฟังก์ชันซึ่งไม่ได้ทำอะไรนอกจากการส่งออกค่า
  3. การทำงานจริงบนมืออื่น ๆ calcFunc()ที่จะทำในฟังก์ชั่น ใช้พารามิเตอร์สองตัวที่จำเป็นสำหรับการคำนวณและทำการเพิ่ม
  4. นอกจากนี้ ฟังก์ชันcalcFunc()ยังใช้พารามิเตอร์อื่น ซึ่งมีความหมายพิเศษ เพื่อการแปรรูปต่อไป
  5. ชื่อของฟังก์ชันcalcFunc()จะถูกส่งผ่านเป็นพารามิเตอร์สุดท้าย

ทันทีที่การคำนวณเสร็จสิ้น ฟังก์ชันdisplacFunc()จะถูกเรียกให้พิมพ์ผลการคำนวณออกมา

การโทรกลับจึงเหมาะอย่างยิ่งสำหรับการใช้งานในการเขียนโปรแกรมแบบอะซิงโครนัส โดยปกติ ฟังก์ชันเรียกกลับจะใช้ร่วมกับฟังก์ชันแบบอะซิงโครนัส

นี่เป็นอีกตัวอย่างหนึ่งของการใช้ฟังก์ชันเรียกกลับหลังจากหมดเวลา:

setTimeout(function () {
    randomFunction("Was called after 2 seconds.");
}, 2000);

function randomFunction(content) {
    console.log(content);
}

ในตัวอย่าง ชื่อฟังก์ชันจะถูกส่งต่อหลังจากหมดเวลา randomFunction()เรียกว่าในsetTimeoutการเรียกใช้ฟังก์ชัน

อีกครั้ง ชื่อฟังก์ชันถูกส่งผ่านเป็นพารามิเตอร์ในการเรียกใช้ฟังก์ชัน ทั้งสองจึงไม่ตรงกัน

ตัวแปรของการโทรที่เกี่ยวข้อง:

setTimeout(myTimeOut, 2000);

function myTimeOut() {
    console.log("This function was called after 2 seconds.");
}

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

คุณยังสามารถเรียกใช้ฟังก์ชันโทรกลับได้บ่อยๆ

ให้ฉันสาธิตวิธีการดำเนินการโค้ดในบริบทของช่วงเวลา:

setInterval(cally, 1000);

function cally() {
    let d = new Date();
    console.log( d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
}

2. สัญญา

สัญญามีไว้เพื่ออนาคต ต่างจากสัญญาอื่น ๆ สัญญาที่ทำในรหัสจะถูกเก็บไว้ ฮ่าฮ่า!

คุณยังสามารถอ่านคำว่าอนาคต นี่เป็นเพียงคำพ้องความหมายสำหรับสัญญา ในการเขียนโปรแกรม ทั้งคู่อ้างถึงตัวยึดตำแหน่ง (พร็อกซี) สำหรับผลลัพธ์ที่ยังไม่ทราบ

ตามกฎแล้วสัญญาดังกล่าวหมายถึงงานที่การประมวลผลยังไม่เสร็จสิ้น

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

นี่คือสิ่งที่สัญญาทำขึ้นจาก:

ประกอบด้วยสองส่วน:

  1. ส่วนแรกมีรหัสที่สร้างผลลัพธ์
  2. ส่วนที่สองตัดสินใจว่าการประมวลผลจะดำเนินต่อไปอย่างไร ขึ้นอยู่กับผลลัพธ์

โครงสร้างพื้นฐานของ Promise object จะมีลักษณะเป็น JavaScript ดังนี้:

 
let promise = new Promise(function (success, error) {
    success();
    //or
    error();
});
promise.then(
    function(value){
        // do something if promise was kept
    },
    function(error){
        // be upset and sign divorce paper!
    }
);

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

เมื่อ Promise ได้รับการดำเนินการ ส่วนที่สองจะได้รับการตัดสินใจโดยลงมือปฏิบัติจริง กำหนดวิธีการประมวลผลขึ้นอยู่กับผลลัพธ์ของสัญญา ( successหรือerror)

หากสัญญาส่งกลับerrorฟังก์ชันการจัดการข้อผิดพลาดจะถูกเรียก ไม่ใช่ตัวจัดการที่ประสบความสำเร็จ theUsualPromise.jsลองดูที่ความคิดเห็นของผู้ที่

ฉันเปิดเผยตัวอย่างที่ใช้งานได้จริงให้คุณฟัง:

function displayFunc(content) {
    console.log(content);
}

let promiseObj = new Promise(function (resolve, reject) {
    let x = 0;
    if (x === 0) {
        resolve("Granted!");
    } else {
        reject("DECLINED!!!");
    }
});
promiseObj.then(function (value) {
    displayFunc(value);
}, function (error) {
    displayFunc(error);
});

ในโค้ดนี้ อ็อบเจกต์ประเภท Promise promiseObj จะถูกสร้างขึ้นที่จุดเริ่มต้น จากนั้นก็จะเข้าสู่การประมวลผลซึ่งในตัวอย่างประกอบด้วยการกำหนดค่าให้กับตัวแปร0x

สุดท้าย มีการตรวจสอบการรันโค้ด

หาก0กำหนดสำเร็จresolveจะเรียกใช้ฟังก์ชัน สำหรับตัวอย่างนี้เป็นกรณีเสมอ ในthenส่วนของ Promise ฟังก์ชันจะถูกดำเนินการ ซึ่งควรจะดำเนินการในกรณีที่ประสบความสำเร็จ

หากคุณต้องการเรียกใช้กรณีความล้มเหลว คุณต้องกำหนดxค่าอื่นที่ไม่ใช่0.

โยนข้าวให้คู่บ่าวสาวคนสุดท้ายของเราasyncawait.

3. Async & Await

ในปี 2560 ฟีเจอร์ที่เป็นประโยชน์อีกอย่างหนึ่งได้แต่งงานอย่างมีความสุขในครอบครัวของมาตรฐาน ECMAScript คีย์เวิร์ดasyncและawait.

มันทำงานเหมือนสัญญา เมื่อมีการให้คำมั่นแล้ว ให้รอให้คำสัญญานั้นแก้ไขหรือปฏิเสธ ภายใต้ประทุน มันเป็นสัญญาแต่ไวยากรณ์นั้นง่ายกว่ามากในการตั้งค่าและทำความเข้าใจในภายหลัง

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

 
async function displayFunc() {
    let promiseObj = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve("Was called after f****** 4 seconds!");
        }, 4000);
    });
    console.log(await promiseObj);
}

displayFunc();

ฟังก์ชันdisplayFunc()ถูกแทรก asyncคุณสมบัติพิเศษของมันคือการทำเครื่องหมายด้วยคำหลัก

การใช้เครื่องหมายด้วยasyncบอกว่าฟังก์ชันจะส่งคืนวัตถุ Promise มิฉะนั้นการประกาศฟังก์ชันไม่แตกต่างจากตัวอย่างก่อนหน้านี้

awaitคำหลักที่ใช้ในบรรทัดสุดท้ายของการทำงาน วัตถุ Promise promiseObjถูกทำเครื่องหมายด้วย สิ่งนี้ทำให้แน่ใจได้ว่าจะแสดงเนื้อหาเฉพาะในกรณีที่โค้ดก่อนหน้านี้ถูกดำเนินการอย่างถูกต้อง

เข้าร่วม Mediumเพื่อรับเนื้อหาที่ไม่มีที่สิ้นสุดของบทช่วยสอนที่ยอดเยี่ยมสำหรับการพัฒนาเว็บ

บทสรุป

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

Credit : https://betterprogramming.pub/3-ways-to-write-asynchronous-code-in-javascript-b8d17e60df06