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

          برنامه نویس 
            بازدید : 34
          جمعه 04 مرداد 1398
           نظرات (0)
        

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

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

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

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

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

مثال درخواستهای http در انگولار ۴

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

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

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

 



1
2
3
4
5
6
7
8
9
10
11
12

import{Injectable}from"@angular/core";
import{Http}from"@angular/http";
 
@Injectable()
exportclassServerService{
    constructor(privatehttp:Http){
 
    }
    storeServer(servers:any[]){
        this.http.post("yourBackendControllerPath",servers);
    }
}

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

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

آموزش فارسی متدهای Http

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13

<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 را به صورت زیر تعریف می‌کنیم:

 
1
2
3

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

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

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

 



1
2
3
4
5
6
7
8
9
10
11
12

import{Injectable}from"@angular/core";
import{Http}from"@angular/http";
 
@Injectable()
exportclassServerService{
    constructor(privatehttp:Http){
 
    }
    storeServer(servers:any[]){
        returnthis.http.post("yourBackendControllerPath",servers);
    }
}

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

 



1
2
3
4
5
6

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

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

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

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

 



1
2
3
4

storeServer(servers:any[]){
        constheader=newHeaders({'Content-Type':'application/json'})
        returnthis.http.post("yourBackendControllerPath",servers,header);
    }

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

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

 
1
2
3

    getServer(){
        returnthis.http.get("yourBackendControllerPath")
    }

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

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

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

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

 



1
2
3
4

storeServer(servers:any[]){
        constheader=newHeaders({'Content-Type':'application/json'})
        returnthis.http.put("yourBackendControllerPath",servers,header);
    }

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

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

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

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

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

فصل ۱

فصل ۲

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

فصل ۴

فصل ۵

فصل ۶

فصل ۷

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

فصل ۹

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

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

منبع: روکسو

ارسال نظر برای این مطلب