فصل ۱۱: معرفی درخواست‌های Http در انگولار ۴

با مطالعه‌ی فصل ۱۰ اطلاعات کاملی در ارتباط با فیلتر‌ها در انگولار ۴ بدست آوردید. همچنین اگر به خاطر داشته باشید در فصول گذشته اشاره‌های فراوانی به مشاهده‌ کننده‌ها یا Observable داشتیم. در این بخش می‌خواهیم علاوه بر آشنایی شما با درخواست‌های http، نحوه‌ی بکارگیری مشاهده کننده ها و کاربردهای آن را در این نوع درخواست‌ها بررسی کنیم. با ما همراه باشید.

درخواست Http چیست؟

همانطور که در جریان هستید یک نرم‌افزار از دو قسمت تشکیل می‌شود: ۱) Backend (سمت سرور) ۲) Frontend (سمت کاربر). برای ارتباط Frontend با Backend یک رابط نیاز است و آن درخواست‌های Http هستند. یعنی با استفاده از این درخواست ها می‌توان اطلاعات را از سرور دریافت و یا به آن ارسال کرد. فرمت ارسال داده در این نوع درخواست به صورت JSON یا XML‌ می‌باشد.

شروع با یک مثال

مطابق تمام فصل‌ها برای درک بهتر مفهوم درخواست‌های HTTP مثالی ارائه خواهیم داد. همانطور که در تصویر زیر مشاهده می‌کنید در این مثال یک دکمه برای اضافه کردن سرور قرار داده‌ایم که با کلیک کردن روی آن نام یک سرور به همراه یک شناسه (id) تصادفی به لیست سرور اضافه می‌شود.

حال ما می‌خواهیم این اطلاعات داخل یک مخزنی ذخیره شود و بتوانیم آن را مجددا بازیابی کنیم. برای انجام اینکار به یک پایگاه داده در backend احتیاج داریم. توجه داشته باشید که برای ایجاد یک پایگاه داده‌ی امن می‌توانید از سرویس‌های پایگاه‌ داده مانند MySql یا SqlServer یا Oracel‌ و.. استفاده کنید. ایجاد پایگاه داده و قسمت Backend به عهده خود شماست و در این بخش تنها به آموزش انگولار می‌پردازیم.

ارسال اطلاعات با متد post

برای برقراری ارتباط با سرور آنلاین خود ابتدا یک فایل server.service.ts‌ در پوشه app و روت اصلی برنامه ایجاد و محتویات درون آن را به صورت زیر کدنویسی خواهیم کرد همچنین مطابق تمام سرویس‌هایی که تا به الان ایجاد کرده‌ایم باید همواره سرویس server.service.ts را درون ویژگی provider فایل app.module.ts فراخوانی کنیم. توجه داشته باشید که می‌خواهیم از سرویس توکار http درون این سرویس استفاده نماییم بنابراین باید مفسر یا دکوراتور Injectable@ را در ابتدای برنامه‌ی خود اعمال کنیم.:

import {Injectable} from "@angular/core";
import {Http} from "@angular/http";

@Injectable()
export class ServerService{
    constructor(private http: Http){

    }
    storeServer(servers: any[]){
        this.http.post("yourBackendControllerPath", servers);
    }
}

همانطور که ملاحظه کردید در این سرویس از ماژول Http توکار انگولار استفاده کرده و با استفاده از متد post داده‌ها را به صفحه backend سرویس خود ارسال کردیم. توجه داشته باشید که به جای عبارت yourBackendControllerPath باید مسیر ذخیره‌سازی داده در سرور را قرار دهید.

برای مطالعه‌ی دقیق درباره امنیت و روش‌های ارسال داده مطالعه‌ی مقاله‌ی زیر به شدت توصیه می‌شود:

حال برای ذخیره‌کردن سرورهای معرفی شده در صفحه باید در قالب app.component.html یک دکمه جهت ذخیره‌ کردن اطلاعات و ارسال آنها توسط متد آن به سرور استفاده کرد:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <input type="text" #serverName>
      <button class="btn btn-primary" (click)="onAddServer(serverName.value)">افزودن سرور</button>
      <hr>
      <button class="btn btn-primary" (click)="onStoreServer()">ذخیره کردن</button>
      <ul class="list-group" *ngFor="let server of servers">
        <li class="list-group-item">{{ server.name }} (شناسه: {{ server.id }})</li>
      </ul>
    </div>
  </div>
</div>

در نهایت متد onStoreServer را به صورت زیر تعریف می‌کنیم:

  onStoreServer(){
    this.serverService.storeServer(this.servers)
  }

البته باید سرویس serverService را درون سازنده پیش‌فرض این کلاس کامپوننت تعریف کنید.

تمامی این درخواست‌ها در پس‌زمینه انگولار با استفاده از مشاهده‌کننده‌ها (Observable) ارسال می‌شوند زیرا در این نوع درخواست‌ها داده‌ها به صورت غیرهمزمان ارسال می‌شوند. حال اگر شما دستور فوق را اجرا کنید هیچ اتفاقی نمی‌افتد و با خطا مواجه خواهید شد. بنابراین برای رفع این خطا باید داده را به صورت یک Observable ارسال کنید و در نهایت با متد subscribe‌ به اشتراک بگذارید. بنابراین برای اصلاح این مثال ابتدا فایل server.Service.ts را به صورت زیر ویرایش می‌کنیم:

import {Injectable} from "@angular/core";
import {Http} from "@angular/http";

@Injectable()
export class ServerService{
    constructor(private http: Http){

    }
    storeServer(servers: any[]){
        return this.http.post("yourBackendControllerPath", servers);
    }
}

سپس متد موجود در فایل app.component.ts را به صورت زیر تغییر می‌دهیم:

  onStoreServer(){
    this.serverService.storeServer(this.servers).subscribe(
        (response) => console.log(response),
        (error) => console.log(error)
    )
  }

بسیار عالی در این حالت علاوه بر اینکه یک درخواست post به سرور شما ارسال می‌شود. وضعیت پاسخ به آن درخواست و همچنین خطای آن را نمایش می‌دهد.

اضافه کردن header به درخواست‌ها

در صورتی که نیاز داشته باشید تا سربرگ مشخصی را برای هر درخواست یا پاسخ درنظر بگیریم باید آن را به صورت زیر در سرویس‌ خود تعریف کنیم:

storeServer(servers: any[]){
        const header = new Headers({'Content-Type': 'application/json'})
        return this.http.post("yourBackendControllerPath", servers, header);
    }

دریافت اطلاعات با متد get

همانطور که در جریان هستید برای دریافت اطلاعات از سرور معمولا از متد get استفاده می‌کنند. حال برای پیاده‌سازی این تکنیک ابتدا فایل server.service.ts را باز می‌کنیم سپس کدهای زیر را در آن اعمال خواهیم کرد:

    getServer(){
        return this.http.get("yourBackendControllerPath")
    }

در نهایت یک دکمه درون صفحه اصلی و فایل app.component.html ایجاد کرده تا اطلاعات را از سرور فراخوانی کند. بنابراین داریم:

import {Response} from "@angular/http";
.
.
.
  onGetServer(){
    this.serverService.getServer()
        .subscribe(
          (response: Response) => {
            const data = response.json();
            console.log(data)
          },
          (error) => console.log(error)
    )
  }

بسیار با اعمال این کدها اطلاعات از سرور موردنظر شما فراخوانی و دریافت می‌شوند.

بروزرسانی اطلاعات با متد put

برای بروزرسانی یک فیلد یا داده درون لیست داده‌ها می‌توان از متد put یا patch استفاده کرد. برای انجام اینکار فایل server.Service.ts را باز کرده و دستورات زیر را درون آن لحاظ می‌کنیم:

storeServer(servers: any[]){
        const header = new Headers({'Content-Type': 'application/json'})
        return this.http.put("yourBackendControllerPath", servers, header);
    }

همانطور که ملاحظه می‌کنید ساختار این دستور دقیقا مشابه post می‌باشد با این تفاوت که اگر دو رکورد یکسان وجود داشته باشند به هنگام ذخیره سازی اطلاعات آن رکورد را با داده‌ی جدید بروزرسانی می‌کند.

بسیار عالی به شما عزیزان تبریک می‌گوییم در این بخش توانستید با درخواست‌های HTTP کار کنید و نحوه بکارگیری آنها در سرویس‌ها را بررسی نمایید.

امیدوارم این سری از مجموعه‌های آموزشی انگولار ۴ برای شما عزیزان مفید واقع شده باشد. با مطالعه‌ی این ۱۱ فصل می‌توانید به سادگی هر چه تمام تر از این فریم ورک قدرتمند استفاده کنید.

جهت عضویت در گروه برنامه نویسی روکسو در تلگرام روی اینجا کلیک کنید.

توجه: دوستان عزیز آموزش ویدیویی انگولار ۵ از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید. (این دوره در حال برگزاری است)

فصل ۱

• بخش ۱: معرفی و اجرای اولین برنامه انگولار ۴
• بخش ۲:‌ معرفی فایل‌های انگولار ۴ و ویرایش اولین برنامه

فصل ۲

• بخش ۱:‌ معرفی چرخه حیات Life Cycle انگولار ۴
• بخش ۲:‌ معرفی کامپوننت‌ها (Components) در انگولار ۴
• بخش ۳:‌ کامپوننت‌ها و ایجاد خودکار آنها در انگولار ۴
• بخش ۴:‌ معرفی Databinding (ارتباطات داده‌ای) در انگولار ۴
• بخش ۵:‌ معرفی رویدادها (Event) و ارتباط آن با Databinding در انگولار ۴
• بخش ۶: مقدمه‌ای بر دستورها (Directives) در انگولار ۴

فصل ۳:‌ خطایابی (Debugging) در انگولار ۴

فصل ۴

• بخش ۱:‌ ارسال داده بین کامپوننت‌ها (والد به فرزند و فرزند به والد) در انگولار ۴
• بخش ۲:‌ معرفی مبحث Encapsulation (کپسوله‌سازی) در انگولار ۴
• بخش ۳: معرفی Local Reference ها در قالب‌های HTML در انگولار ۴
• بخش ۴: معرفی چرخه حیات (lifecycle) و هوک (hook) در انگولار ۴

فصل ۵

• بخش ۱: ساخت دستورهای صفتی (Attribute Directive) دلخواه در انگولار ۴
• بخش ۲: ارسال اطلاعات به ویژگی‌ها (Property) و پاسخ به رویدادها (Event) در دستورهای صفتی
• بخش ۳: ایجاد دستورهای ساختاری (Structural Directive) در انگولار ۴

فصل ۶

• بخش ۱: معرفی سرویس‌ها (Service) و تزریق وابستگی (Dependency Injection) در انگولار ۴
• بخش ۲:‌ معرفی تزریق سرویس‌ها (Service) درون یکدیگر در انگولار ۴

فصل ۷

• بخش ۱:‌ معرفی مسیریابی (Routing) در انگولار ۴
• بخش ۲:‌ معرفی پارامترهای موجود در آدرس‌ها (Url) در انگولار ۴
• بخش ۳:‌ تعیین سطح دسترسی برای مسیرها در انگولار ۴
• بخش ۴:‌ امنیت در مسیردهی (Routing Guard) در انگولار ۴

فصل ۸: معرفی Observable یا مشاهده کننده‌ها در انگولار ۴

فصل ۹

• بخش ۱: معرفی فرم‌ها و رویکرد Template-Driven در انگولار ۴
• بخش ۲: معرفی فرم‌ها و رویکرد Reactive در انگولار ۴

فصل ۱۰: معرفی فیلترها یا Pipes در انگولار ۴

فصل ۱۱: معرفی درخواست‌های Http در انگولار ۴