ตัวตรวจสอบแบบอะซิงโครนัส
ตรวจสอบข้อมูลกับเซิร์ฟเวอร์แบบอะซิงโครนัส
ตัวตรวจสอบแบบอะซิงโครนัส เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การตรวจสอบที่รอผล
การตรวจสอบบางอย่างต้องใช้เซิร์ฟเวอร์ เช่น การตรวจสอบว่าชื่อผู้ใช้ถูกใช้ไปแล้วหรือไม่ ตัวตรวจสอบแบบอะซิงโครนัส จะส่งคืนพรอมิสหรืออ็อบเซิร์ฟเวเบิลที่ให้ผลเป็นแผนผังข้อผิดพลาดหรือค่า null
ชนิด AsyncValidatorFn
ตัวตรวจสอบแบบอะซิงโครนัสรับคอนโทรลและส่งคืน Observable<ValidationErrors | null> หรือพรอมิส
const v: AsyncValidatorFn = (control) => {
return checkAvailable(control.value);
};การคืนค่า null หมายถึงถูกต้อง
ให้ผลเป็น null เมื่อค่าถูกต้อง หรือเป็นออบเจ็กต์ข้อผิดพลาด เช่น { taken: true } เมื่อค่าไม่ถูกต้อง เช่นเดียวกับตัวตรวจสอบแบบซิงโครนัส
ตัวตรวจสอบชื่อผู้ใช้
ตัวตรวจสอบนี้เรียกใช้บริการและแปลงผลลัพธ์
usernameValidator(api: UserApi): AsyncValidatorFn {
return (control) =>
api.isTaken(control.value).pipe(
map(taken => taken ? { taken: true } : null)
);
}การลงทะเบียน
ตัวตรวจสอบแบบอะซิงโครนัสจะอยู่ในอาร์กิวเมนต์ลำดับที่สามของคอนโทรล แยกจากตัวตรวจสอบแบบซิงโครนัส
new FormControl('', {
validators: [Validators.required],
asyncValidators: [usernameValidator(api)]
});สถานะ PENDING
ขณะที่ตัวตรวจสอบแบบอะซิงโครนัสทำงาน สถานะของคอนโทรลจะเป็น PENDING ใช้สถานะนี้เพื่อแสดงตัวหมุนรอ
@if (form.controls.username.pending) {
<span>Checking...</span>
}การหน่วงคำขอ
ตัวตรวจสอบแบบอะซิงโครนัสจะทำงานทุกครั้งที่ค่ามีการเปลี่ยนแปลง ควรหน่วงเวลาเพื่อหลีกเลี่ยงการส่งคำขอไปยังเซิร์ฟเวอร์ถี่เกินไป
return timer(300).pipe(
switchMap(() => api.isTaken(control.value)),
map(taken => taken ? { taken: true } : null)
);switchMap ยกเลิกการเรียกที่ล้าสมัย
การใช้ switchMap จะยกเลิกคำขอก่อนหน้าที่ยังทำงานอยู่เมื่อค่ามีการเปลี่ยนแปลงอีกครั้ง ดังนั้นจึงสนใจเฉพาะผลลัพธ์ล่าสุด
กลยุทธ์ updateOn
ตั้งค่า updateOn: 'blur' เพื่อให้การตรวจสอบแบบอะซิงโครนัสทำงานเมื่อผู้ใช้ออกจากฟิลด์เท่านั้น ช่วยลดจำนวนคำขอ
new FormControl('', {
asyncValidators: [usernameValidator(api)],
updateOn: 'blur'
});การอ่านข้อผิดพลาด
แสดงข้อผิดพลาดเมื่อการตรวจสอบเสร็จสิ้น และคอนโทรลมีการแก้ไขหรือถูกแตะต้องแล้ว
@if (form.controls.username.hasError('taken')) {
<span>Username already taken</span>
}แนวทางปฏิบัติที่ดี
ควรหน่วงเวลา ยกเลิกคำขอที่ล้าสมัย แสดงตัวบ่งชี้ว่ากำลังรอ และจัดการข้อผิดพลาดของเครือข่ายเสมอ เพื่อไม่ให้ฟอร์มค้างอยู่ในสถานะ PENDING
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับตัวตรวจสอบแบบอะซิงโครนัส
สรุปทบทวน
คุณได้เรียนรู้ว่า AsyncValidatorFn ส่งคืนอ็อบเซิร์ฟเวเบิลหรือพรอมิสของ ValidationErrors | null และลงทะเบียนไว้ในอาร์กิวเมนต์ลำดับที่สามของคอนโทรล ทำให้คอนโทรลอยู่ในสถานะ PENDING ควรหน่วงเวลาและใช้ switchMap เพื่อจัดการการเรียกเซิร์ฟเวอร์
คำถามที่พบบ่อย
บทเรียน “ตัวตรวจสอบแบบอะซิงโครนัส” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวตรวจสอบแบบอะซิงโครนัส” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวตรวจสอบแบบอะซิงโครนัส”
ตรวจสอบข้อมูลกับเซิร์ฟเวอร์แบบอะซิงโครนัส คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “ตัวตรวจสอบแบบอะซิงโครนัส” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟอร์มรีแอกทีฟแบบมีชนิดข้อมูล
- FormArray และฟิลด์แบบไดนามิก
- ตัวตรวจสอบแบบอะซิงโครนัส
- รูปแบบการใช้ FormBuilder