نحوه واکشی داده ها با استفاده از provideHttpClient در انجمن Angular – DEV

سیستم اکو Angular در طول سال گذشته دستخوش تغییراتی شده است. یکی از آن تغییرات، معرفی مفهوم برنامه های کاربردی مستقل بود که در نسخه 14 Angular معرفی شد. برنامه های کاربردی مستقل امکان ایجاد پروژه های بدون ماژول را فراهم می کند. ما می‌توانیم چنین برنامه‌هایی را برنامه‌های بدون ماژول بنامیم که امکان وارد کردن بسته‌های مورد نیاز برای ساخت یک برنامه را فراهم می‌کند.

برای واکشی داده ها در یک برنامه کاربردی مستقل، Angular مفهوم استفاده از آن را معرفی کرد provideHttpClient. در یک برنامه مبتنی بر ماژول، HttpClientModule راهی برای رفتن باقی می ماند. در چند مرحله بعدی، نحوه استفاده از آن را توضیح خواهم داد provideHttpClient برای واکشی داده ها از یک REST API عمومی.

پیش نیازها

این آموزش مستلزم آن است که با اصول اولیه فناوری های ذکر شده در زیر آشنا باشید:

• Html
• جاوا اسکریپت
• TypeScript
• مدیر بسته گره (npm)

فهرست مطالب

همچنین می توانید نسخه ویدیویی این مقاله را در کانال یوتیوب من مشاهده کنید:

https://www.youtube.com/watch?v=_PXwI8ogKCs

نحوه نصب و ایجاد یک برنامه مستقل در Angular 16

برای ایجاد یک پروژه Angular جدید، باید مطمئن شویم که Angular در ترمینال نصب شده است. برای انجام این کار، باید ترمینال را باز کرده و دستور را اجرا کنیم ng version. اگر پیغام خطا دریافت کردید، به این معنی است که Angular روی دستگاه شما نصب نشده است و برای نصب آن باید دستور زیر را اجرا کنید:

npm install -g @angular/cli

پس از اتمام نصب، می توانید ترمینال را ببندید و دوباره باز کنید و سپس دوباره اجرا کنید ng version فرمان که باید نتیجه زیر را در ترمینال به ما بدهد:

از تصویر بالا نسخه نصب شده انگولار را می بینیم که در زمان نگارش این مقاله انگولار 16 می باشد.

در مرحله بعد، می توانیم با اجرای دستور زیر اقدام به ایجاد یک برنامه مستقل جدید در ترمینال خود کنیم:

ng new ng-client --routing=false --style=css --standalone

دستور بالا یک برنامه مستقل جدید به نام ایجاد می کند ng-client. این برنامه بدون پیکربندی مسیریابی خواهد بود، همانطور که آن را روی false تنظیم کردیم، و یک شیوه نامه CSS. برای اجرای این اپلیکیشن می‌توانیم به ng-client دایرکتوری و اجرا کنید ng serve --open فرمان این باید رابط کاربری پیش‌فرض الگوی Angular را همانطور که در زیر مشاهده می‌کنید باز کند.

تولید سرویس Angular

سرویس‌ها در Angular کلاس‌های TypeScript هستند که به انجام عملکردهای خاص در یک برنامه Angular کمک می‌کنند. در این برنامه، ما از سرویس Angular برای واکشی داده ها از یک REST API استفاده خواهیم کرد. برای انجام این کار، اولین کاری که باید انجام دهیم این است که یک Angular Service با دستور زیر تولید کنیم:

ng g service service/data

با موارد فوق، یک سرویس جدید به نام DataService در داخل یک پوشه سرویس ایجاد می شود.

نحوه پیکربندی provideHttpClient

برای پیکربندی Angular Service، به قسمت زیر می رویم main.ts فایل. در اینجا می توانیم کد زیر را داشته باشیم:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()],
}).catch((err) => console.error(err));

برای خلاصه کردن کد بالا، ما

• با وارد کردن شروع کنید provideHttpClient از @angular/common/http بسته بندی
• بعد، ما تزریق می کنیم provideHttpClient() در داخل providers آرایه.

این پیکربندی اکنون امکان استفاده از HttpClient برای برقراری ارتباط با REST API در ما DataService فایل.

یکپارچه سازی JSON Placeholder REST API

REST API عمومی که در این آموزش استفاده خواهیم کرد JSON Placeholder نام دارد. برای ادغام این API، باید چند بسته را در خود وارد کنیم DataService فایل:

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

در مرحله بعد، رابطی را ایجاد می کنیم که به شکل دادن به روشی که شی از داده های ما در حال انجام است، کمک می کند، همانطور که در زیر مشاهده می کنید:

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

این user id، id، title، و body همه داده هایی هستند که ما قصد داریم در جدول نمایش دهیم. اکنون می توانیم متغیری را ایجاد کنیم که پیوند REST API ما را نگه می دارد و همچنین آن را تزریق می کنیم HttpClient در سازنده

apiUrl = 'https://jsonplaceholder.typicode.com/posts';

constructor(private http: HttpClient) {}

در نهایت، تابعی را ایجاد می کنیم که با REST API ارتباط برقرار می کند، همانطور که در زیر مشاهده می کنید:

getAllPosts(): Observable<Post[]> {
 return this.http.get<Post[]>(this.apiUrl);
}

• این getAllPosts() به یک ضمیمه شده است Observable از نوع Post.
• در return بیانیه، ما از get درخواست http برای بازیابی داده ها از API.

ما DataService اکنون فایل باید به شکل زیر باشد:

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

@Injectable({
  providedIn: 'root',
})
export class DataService {
  apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  getAllPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(this.apiUrl);
  }
}

با این پیکربندی، اکنون می توانیم با استفاده از تزریق وابستگی، مستقیماً از فایل کامپوننت خود با سرویس ارتباط برقرار کنیم.

نمایش داده ها در یک جدول HTML

برای نمایش داده ها بر روی یک جدول، به آدرس خود می رویم app.component.ts فایل. در اینجا ما کد زیر را پیاده سازی می کنیم:

• ما با واردات شروع می کنیم DataService که در خط 3، و سپس آن را در سازنده تزریق می کنیم خط 24.
• بعد، ما اینترفیس به نام ایجاد کردیم Post بین خط 5 و خط 11.
• که در خط 21 و خط 22، دو متغیر ایجاد کردیم. اولین متغیر فراخوانی شد posts، که به یک نوع اختصاص داده شده است Post، دارای مقدار اولیه یک آرایه خالی است([]). این متغیر داده های واکشی شده از REST API را نگه می دارد. متغیر دوم فراخوانی شد errorMessage در صورت وجود، پیام خطای ما را نگه می دارد.
• در نهایت، در داخل ما ngOnInit قلاب چرخه حیات ما منطق مصرف داده ها را پیاده سازی می کنیم DataService. که در خط 27، ما تماس گرفتیم getAllPosts() عملکرد از DataService ما. پس از آن مشترک شدیم getAllPosts() تابع، بازگشت دو Observers از اشتراک اولین Observer نامیده میشود next که در خط 28. در اینجا ما تماس گرفتیم posts متغیری که قبلا در آن ایجاد کردیم خط 21، و داده های آرگومان بعدی را به آن ضمیمه کرد که به آن نیز گفته می شود نوشته ها. بعد، در خط 32، خطا را ایجاد کردیم Observer و سپس هرگونه خطای احتمالی که ممکن است رخ دهد را پیوست کنید errorMessage متغیر.

با این پیاده سازی، اگر همه فایل ها را ذخیره و سپس اجرا کنیم ng serve --open دستور، یک تب جدید در مرورگر باز می شود. در ما app.component.ts فایل، ما یک console.log روش در خط 30، که به ما امکان می دهد هنگام باز کردن کنسول، داده ها را همانطور که در تصویر زیر مشاهده می کنید مشاهده کنیم:

برای نمایش داده ها در کنسول در داخل یک جدول، به سمت زیر می رویم app.component.htmlکد دیگ بخار را پاک کنید و سپس کد زیر را بچسبانید:

<table>
  <tr>
    <th>id</th>
    <th>title</th>
    <th>body</th>
  </tr>
  <tr *ngFor="let post of posts">
    <td>{{post.id}}</td>
    <td>{{post.title}}</td>
    <td>{{post.body}}</td>
  </tr>
  <tr>
</table>

در بالا، ما از آن استفاده کردیم *ngFor بخشنامه در داخل tr تگ کنید تا از طریق داده ها حلقه بزنید. سپس از درون یابی استفاده کردیم({{}}) برای نمایش داده ها برای id، title، و body.

اگر ذخیره کنیم، اکنون می توانیم نتایج زیر را در مرورگر داشته باشیم:

نتیجه

در این آموزش، نحوه واکشی داده ها برای برنامه های مستقل را با استفاده از آن یاد گرفته اید provideHttpClient در انگولار. اگر می‌خواهید به پایه کد دسترسی داشته باشید، می‌توانید مخزن را در اینجا در Github Fork یا کلون کنید.

اگر این مقاله را مفید می‌دانید، می‌توانید با عضویت در کانال YouTube من که در آن آموزش‌های عالی در مورد فناوری‌های توسعه وب مانند JavaScript، React، Angular، Node.js، WordPress و غیره ایجاد می‌کنم، حمایت خود را نشان دهید.