วิธีทำการเรียก API ในแอปพลิเคชันเชิงมุม

บทนำ: เหตุใดการเรียก API จึงมีความสำคัญในแอปพลิเคชันเชิงมุม

ในเว็บสมัยใหม่ การค้นหาแอปพลิเคชันที่ทำงานแยกกันนั้นหายาก แอปพลิเคชันส่วนใหญ่สื่อสารกับเซิร์ฟเวอร์เพื่อดึงข้อมูล จัดเก็บ หรือจัดการข้อมูล ซึ่งเป็นที่มาของการเรียกใช้ API

ลองใช้ตัวอย่างในโลกแห่งความเป็นจริงเพื่ออธิบายสิ่งนี้

ตัวอย่างเช่น ลองพิจารณาแอปจองการเดินทาง ที่นี่ การเรียกใช้ Angular API ใช้เพื่อดึงข้อมูลเที่ยวบิน ห้องว่างของโรงแรม หรือการพยากรณ์อากาศจาก API ต่างๆ ข้อมูลที่ดึงมาจาก API เหล่านี้จะแสดงให้ผู้ใช้เห็นแบบไดนามิก มอบประสบการณ์การท่องเว็บที่ราบรื่น

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

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

ตรวจสอบหลักสูตรฟรีของเราเพื่อรับความได้เปรียบเหนือการแข่งขัน

การตั้งค่าสภาพแวดล้อมเชิงมุมสำหรับการเรียก API

ก่อนที่เราจะเจาะลึกกระบวนการเรียก Angular API เรามาตั้งค่าสภาพแวดล้อมเชิงมุมกันก่อน

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js และ npm (Node Package Manager) ไว้ในระบบของคุณ จากนั้นติดตั้ง Angular CLI (Command Line Interface) ทั่วโลกโดยใช้ npm CLI นี้จะช่วยให้เราสร้างและจัดการโครงการเชิงมุมของเราได้อย่างง่ายดาย

npm ติดตั้ง -g @angular/cli

ตอนนี้สร้างโครงการเชิงมุมใหม่: ng new my-api-project

ใหม่ my-api-project

นำทางไปยังไดเรกทอรีโครงการ:cd my-api-project

cd my-api-โครงการ

ตรวจสอบหลักสูตรการพัฒนาซอฟต์แวร์ ของ upGrad เพื่อเพิ่มทักษะให้กับตัวคุณเอง

ทำความเข้าใจกับ HTTP ในเชิงมุม: โมดูล HttpClient

ในการ เรียก API ใน Angular เราใช้โมดูล HttpClient เป็นหลัก โมดูลนี้ทำให้การรวม API ง่ายขึ้นในแอปพลิเคชันเชิงมุมโดยเสนอ API ที่คล่องตัวสำหรับคำขอ HTTP เริ่มต้นด้วยการอิมพอร์ต HttpClientModule ใน app.module.ts ของคุณ:

นำเข้า { HttpClientModule } จาก '@angular/common/http';

@NgModule({

นำเข้า: [

// การนำเข้าอื่น ๆ ที่นี่

HttpClientModule

]

})

การสร้างคำขอ GET อย่างง่าย: การดึงข้อมูลจาก API

ประเภท การเรียก API ที่พบบ่อยที่สุดใน Angular คือคำขอ GET ซึ่งใช้เพื่อดึงข้อมูลจากเซิร์ฟเวอร์ นำเข้า HttpClient ในส่วนประกอบของคุณและแทรกผ่านตัวสร้าง จากนั้นใช้เมธอด get() เพื่อดึงข้อมูลจาก API:

นำเข้า { HttpClient } จาก '@angular/common/http';

ส่งออกคลาส AppComponent {

ตัวสร้าง (http ส่วนตัว: HttpClient) { }

ดึงข้อมูล () {

this.http.get('https://api.example.com/data').สมัคร(data => {

console.log (ข้อมูล);

});

}

}

การจัดการข้อผิดพลาดและข้อยกเว้นในการเรียก API

คุณควรคาดการณ์ข้อผิดพลาดและข้อยกเว้นเสมอเมื่อทำงานกับการเรียก API ใน Angular โมดูล HttpClient ส่งคืนค่าที่สังเกตได้ คุณสามารถใช้ตัวดำเนินการ catchError จาก RxJS เพื่อจัดการข้อผิดพลาดได้อย่างสง่างาม:

นำเข้า { catchError } จาก 'rxjs/operators';

นำเข้า { ThrowError } จาก 'rxjs';

ดึงข้อมูล () {

this.http.get('https://api.example.com/data').pipe(

catchError (ข้อผิดพลาด => {

console.error('เกิดข้อผิดพลาด:', ผิดพลาด);

ส่งคืนข้อผิดพลาด (ข้อผิดพลาด);

})

).สมัครสมาชิก(ข้อมูล => {

console.log (ข้อมูล);

});

}

การสร้างคำขอ POST: การส่งข้อมูลไปยัง API

เช่นเดียวกับที่เราสามารถดึงข้อมูลโดยใช้คำขอ GET เรายังสามารถส่งข้อมูลไปยัง API โดยใช้คำขอ POST การเรียก Angular API ประเภทนี้ มีความสำคัญเมื่อเราต้องการส่งข้อมูลจากแอปพลิเคชัน Angular ไปยังเซิร์ฟเวอร์:

ข้อมูลโพสต์ () {

const body = { ชื่อเรื่อง: 'โพสต์เชิงมุม', เนื้อหา: 'การส่งข้อมูลไปยัง API' };

this.http.post('https://api.example.com/posts', body).subscribe(response => {

console.log (ตอบกลับ);

});

}

การอัปโหลดไฟล์ด้วยการเรียก API: การใช้วัตถุ FormData

ในการอัปโหลดไฟล์ในการเรียก API ใน Angular เราสามารถใช้วัตถุ FormData ซึ่งทำให้เราสามารถส่งคู่คีย์-ค่าเป็นข้อมูลในแบบฟอร์มได้:

อัพโหลดไฟล์ (ไฟล์: ไฟล์) {

const formData = ใหม่ FormData();

formData.append('ไฟล์', ไฟล์);

this.http.post('https://api.example.com/upload', formData).subscribe(response => {

console.log (ตอบกลับ);

});

}

การทำงานกับพารามิเตอร์การค้นหาในการเรียก API

พารามิเตอร์การสืบค้นเป็นส่วนสำคัญของการเรียก API ใน Angular ซึ่งมักใช้สำหรับการกรองหรือจัดเรียงข้อมูล โมดูล HttpClient มีวิธีง่ายๆ ในการเพิ่มพารามิเตอร์การค้นหาให้กับคำขอของคุณ:

ดึงข้อมูล () {

this.http.get('https://api.example.com/data', {

พารามิเตอร์: {

จัดเรียง: 'จากน้อยไปหามาก',

ขีดจำกัด: '10'

}

}).สมัคร(ข้อมูล => {

console.log (ข้อมูล);

});

}

การแคชข้อมูลเพื่อประสิทธิภาพที่ดีขึ้น: การใช้ HTTP Interceptors

การแคชข้อมูลสามารถปรับปรุงประสิทธิภาพของแอปพลิเคชันเชิงมุมได้อย่างมาก นี่คือที่มาของ HTTP Interceptors ช่วยให้คุณสามารถสกัดกั้นคำขอและการตอบสนอง HTTP ซึ่งเป็นสถานที่ที่สมบูรณ์แบบสำหรับการใช้กลยุทธ์การแคช คุณสามารถใช้ Angular LocalStorage หรือ IndexedDB ภายใน Web Worker ใน Angular เพื่อจัดเก็บแคช

@ฉีด()

CacheInterceptor คลาสส่งออกใช้ HttpInterceptor {

ตัวสร้าง (แคชส่วนตัว: CacheService) {} // สมมติว่าคุณมีบริการแคช

การสกัดกั้น (req: HttpRequest<any> ถัดไป: HttpHandler): Observable<HttpEvent<any>> {

const cachedResponse = this.cache.get(req);

ถ้า (cachedResponse) {

การกลับมาของ (cachedResponse);

}

ย้อนกลับ next.handle(req).pipe(

แตะ (เหตุการณ์ => {

ถ้า (อินสแตนซ์เหตุการณ์ของ HttpResponse) {

this.cache.put(req เหตุการณ์);// อัปเดตแคช

}

})

);

}

}

ทดสอบการเรียก API ในเชิงมุม: จำลองคำขอ HTTP ด้วย HttpClientTestingModule

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

นำเข้า { HttpClientTestingModule, HttpTestingController } จาก '@angular/common/http/testing';

beforeEach(() => {

TestBed.configureTestingModule({

นำเข้า: [HttpClientTestingModule],

});

httpMock = TestBed.inject (HttpTestingController);

});

it('ควรส่งคำขอ GET', () => {

บริการ.fetchData().สมัครสมาชิก();

const req = httpMock.expectOne('https://api.example.com/data');

คาดหวัง (req.request.method).toEqual ('GET');

req.flush ({ ข้อมูล: 'ทดสอบข้อมูล' });

});

เคล็ดลับที่ควรทราบขณะทำการเรียก API ในแอปพลิเคชันเชิงมุม

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

1. ใช้ HttpClient: โมดูล HttpClient เป็นเครื่องมือที่มีประสิทธิภาพสำหรับ การเรียก Angular APIมี API ที่เรียบง่ายสำหรับคำขอ HTTP และขจัดความซับซ้อนพื้นฐานของการสร้างคำขอ
2. จัดการข้อผิดพลาดอย่างสง่างาม: คาดการณ์ไว้เสมอว่าอาจมีบางอย่างผิดปกติกับการเรียก API ของคุณใน Angularใช้ตัวดำเนินการ catchError จาก RxJS เพื่อจัดการกับข้อผิดพลาดที่อาจเกิดขึ้นระหว่างการเรียก API
3. เพิ่มประสิทธิภาพการเรียก API: หลีกเลี่ยงการเรียก API ที่ไม่จำเป็นใช้ประโยชน์จาก Angular LocalStorage หรือการแคชเพื่อจัดเก็บข้อมูลที่คุณอาจต้องใช้ซ้ำ สิ่งนี้ช่วยลดภาระบนเซิร์ฟเวอร์และปรับปรุงประสิทธิภาพของแอปพลิเคชัน
4. ใช้ Web Worker ใน Angular สำหรับงานหนัก: พิจารณาใช้ Web Worker ใน Angular หากคุณต้องรับมือกับงานคำนวณจำนวนมากหรือข้อมูลปริมาณมากการดำเนินการนี้จะทำให้ UI ของคุณยังคงราบรื่นและตอบสนอง เนื่องจากงานจะถูกถ่ายไปยังเธรดพื้นหลังแยกต่างหาก
5. รักษาความปลอดภัยการโทร API ของคุณ: ความปลอดภัยเป็นสิ่งสำคัญยิ่งตรวจสอบให้แน่ใจว่าคุณใช้โปรโตคอลที่ปลอดภัย (เช่น HTTPS) สำหรับการเรียก Angular API ของคุณ นอกจากนี้ อย่าเปิดเผยข้อมูลที่ละเอียดอ่อน เช่น คีย์ API ในโค้ดฝั่งไคลเอ็นต์ของคุณ
6. ทดสอบการเรียก API ของคุณ: การทดสอบมีความสำคัญต่อการรวม Angular APIใช้ HttpClientTestingModule เพื่อจำลองคำขอ HTTP และตรวจสอบว่าการเรียก API ของคุณทำงานตามที่คาดไว้
7. อัปเดตอยู่เสมอ: Angular เป็นเฟรมเวิร์กที่มีการพัฒนาอย่างต่อเนื่องอัพเดทอยู่เสมอด้วยเวอร์ชันล่าสุดและการอัปเดตเพื่อทำการเรียก API ที่มีประสิทธิภาพและปลอดภัยที่สุด

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

สำรวจหลักสูตรวิศวกรรมซอฟต์แวร์ยอดนิยมของเรา

ขยายชุดทักษะของคุณด้วยหลักสูตร upGrad

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

มาดูหลักสูตรบางส่วนที่สามารถช่วยให้คุณพัฒนาความรู้ไปอีกขั้น

หลักสูตร Full Stack Developer (PGD – IIITB)

โปรแกรม Executive PG ในการพัฒนา Full Stack จาก IIITB ซึ่งนำเสนอโดย upGrad เป็นโปรแกรมที่ครอบคลุมซึ่งจะพาคุณผ่านการเดินทางตั้งแต่พื้นฐานไปจนถึงแง่มุมขั้นสูงของการพัฒนา Full Stack หลักสูตรนี้ครอบคลุมเชิงลึกเชิงมุมพร้อมกับเทคโนโลยีส่วนหน้าและส่วนหลังอื่น ๆ หลักสูตรนี้อาจเป็นก้าวสำคัญต่อไปของคุณหากคุณปรารถนาที่จะเป็นนักพัฒนาฟูลสแต็กที่มีความเชี่ยวชาญ

วิศวกรรมซอฟต์แวร์ (MCS – LJMU)

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

สำรวจหลักสูตรการพัฒนาซอฟต์แวร์ฟรีของเรา

Bootcamp การพัฒนาสแต็คเต็มรูปแบบ

สำหรับผู้ที่กำลังมองหาเส้นทางการเรียนรู้ที่รวดเร็วและเข้มข้น upGrad ขอเสนอ Bootcamp การพัฒนาซอฟต์แวร์แบบ Full Stack Bootcamp นี้จะช่วยให้คุณมีความรู้และทักษะที่จำเป็นในการสร้างเว็บแอปพลิเคชันที่ครอบคลุม โดยเน้นที่เทคโนโลยีส่วนหน้าอย่าง Angular อย่างครอบคลุม

บทสรุป

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

เมื่อเราสรุป เป็นที่น่าสังเกตว่าการเรียนรู้อย่างต่อเนื่องและการพัฒนาทักษะเป็นกุญแจสำคัญในการคงความเกี่ยวข้องในอุตสาหกรรมเทคโนโลยีที่มีการพัฒนาอย่างรวดเร็ว นี่คือที่มาของแพลตฟอร์มอย่าง UpGrad

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

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