<\/div>\n

Merhaba,<\/p>\n

Harici verileri almak, posta g\u00f6ndermek vs. gibi i\u015flemler i\u00e7in Http servisini kullanmaktay\u0131z. Haliyle Angular 4 uygulamalar\u0131nda bu i\u015flemler i\u00e7in Http servislerinden nas\u0131l yararlan\u0131laca\u011f\u0131n\u0131 ele alaca\u011f\u0131z.<\/p>\n

Bu makalemizde Http servislerini kullanmay\u0131 \u00f6rneklendirmek i\u00e7in harici bir kaynak olan \u015fu adresten<\/a> veri elde etmeyi ama\u00e7layaca\u011f\u0131z ve \u015fimdilik \u00f6rne\u011fimizi mod\u00fcl\u00fcm\u00fcz\u00fcn varsay\u0131lan componentinde yani “app.component.ts” \u00fczerinde ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n

Gerekli Mod\u00fcllerin \u0130mport Edilmesi<\/h4>\n
Http servisini kullanmak i\u00e7in a\u015fa\u011f\u0131daki mod\u00fclleri ilgili sayfada(art\u0131k hangi sayfada \u00e7al\u0131\u015f\u0131yorsan\u0131z<\/em>) import etmek gerekecektir.<\/p>\n
\n
\nHttp<\/em><\/strong>;
\n“@angular\/http<\/span><\/strong><\/em>“‘den import edilecektir. Http istekleri yapmak i\u00e7in kullanaca\u011f\u0131m\u0131z mod\u00fcld\u00fcr.\n<\/li>\n
\nResponse<\/em><\/strong>;
\n“@angular\/http<\/span><\/strong><\/em>“‘den import edilecektir. Http iste\u011fine kar\u015f\u0131l\u0131k gelen cevaplar\u0131 y\u00f6netmemiz i\u00e7in gerekli nesneleri i\u00e7eren mod\u00fcld\u00fcr.\n<\/li>\n
\nmap<\/em><\/strong>;
\n“rxjs\/add\/operator\/map<\/span><\/strong><\/em>“‘den import edilecektir. Map, gelen response datay\u0131 istedi\u011fimiz bir veri tipinde ya da formatta elde etmek i\u00e7in kullan\u0131l\u0131r.\n<\/li>\n
\ndo<\/em><\/strong>;
\n“rxjs\/add\/operator\/do<\/span><\/strong><\/em>“‘den import edilecektir. Do, yap\u0131lan asenkron operasyon i\u015flemi bitti\u011finde yap\u0131lacak i\u015flemleri belirlemek i\u00e7in kullan\u0131l\u0131r.\n<\/li>\n
\ncatch<\/em><\/strong>;
\n“rxjs\/add\/operator\/catch<\/span><\/strong><\/em>“‘den import edilecektir. S\u00fcre\u00e7te kar\u015f\u0131la\u015fabilece\u011fimiz olas\u0131 hatalar\u0131 kontrol etmemizi sa\u011flar.\n<\/li>\n<\/ol>\n
Http Service Kullan\u0131m\u0131<\/h4>\n
Http servisinin kullan\u0131m\u0131na dair a\u015fa\u011f\u0131da kod blo\u011funu inceleyebilirsiniz.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Http, Response } from '@angular\/http';\r\nimport 'rxjs\/add\/operator\/map';\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent implements OnInit {\r\n httpData;\r\n constructor(private http: Http) {\r\n\r\n }\r\n getDatas() {\r\n this.http.get("http:\/\/jsonplaceholder.typicode.com\/users")\r\n .map(response => response.json())\r\n .subscribe(data => this.httpData = data);\r\n }\r\n ngOnInit() {\r\n this.getDatas();\r\n }\r\n}\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funa dikkat ederseniz e\u011fer; ilk olarak Http, Response ve map mod\u00fclleri import edilmi\u015ftir. Ard\u0131ndan, talep neticesinde elde edilecek response datay\u0131 atamak i\u00e7in “httpData” ad\u0131nda bir de\u011fi\u015fken olu\u015fturulmu\u015ftur. Bu de\u011fi\u015fkene bir tip belirlemememizin sebebi, talep neticesinde elde edece\u011fimiz response datan\u0131n hangi tipten olaca\u011f\u0131n\u0131 bilmememizden kaynaklanmaktad\u0131r. Devam\u0131nda “AppComponent” s\u0131n\u0131f\u0131n\u0131n yap\u0131c\u0131 metodunda(constructer) bir Http nesnesi talep edilmi\u015f ve bu nesne “getDatas” isimli metot i\u00e7erisinde kullan\u0131lm\u0131\u015ft\u0131r.<\/p>\n
\u015eimdi “getDatas” fonksiyonu a\u015fa\u011f\u0131 al\u0131p yap\u0131sal olarak detayl\u0131 de\u011ferlendirelim;<\/p>\n
\r\n getDatas() {\r\n this.http.get("http:\/\/jsonplaceholder.typicode.com\/users")\r\n .map(response => response.json())\r\n .subscribe(data => this.httpData = data);\r\n }\r\n<\/pre>\n
Constructer’dan al\u0131nan Http nesnesinin referans\u0131 \u00fczerinden “get” metodu ile talepte bulunaca\u011f\u0131m\u0131z harici kayna\u011fa bir request yap\u0131lmaktad\u0131r. Bu request neticesinde gelen response datan\u0131n bi\u00e7imlendirmesi “map” fonksiyonuyla ger\u00e7ekle\u015ftirilmekte ve lambda ifadeleriyle bu i\u015flem sa\u011flanmaktad\u0131r. Dikkat ederseniz elde etti\u011fimiz response datay\u0131 burada json format\u0131na \u00e7evirmekteyiz. En son bu i\u015flemlerde ba\u015far\u0131 s\u00f6z konusuysa “subscribe” fonksiyonu tetiklenmekte ve i\u00e7erisinde lambda expression ile elde edilen response data \u00f6nceden olu\u015fturulmu\u015f global “httpData” isimli de\u011fi\u015fkene atanmaktad\u0131r.<\/p>\n
Tabi t\u00fcm bu i\u015flemleri yaparken Http, Response vs. gibi harici mod\u00fclleri kullanaca\u011f\u0131m\u0131zdan dolay\u0131 bunlar\u0131 mod\u00fcl\u00fcm\u00fcz\u00fcn “imports” \u00f6zelli\u011fine eklememiz gerekmektedir. Bu i\u015flem i\u00e7in mod\u00fcl s\u0131n\u0131f\u0131n\u0131n tan\u0131mland\u0131\u011f\u0131 “app.module.ts” dosyas\u0131na “HttpModule” isimli mod\u00fcl\u00fc a\u015fa\u011f\u0131daki gibi import etmemiz gerekmektedir ve sadece bu mod\u00fcl\u00fcn import edilmesi yeterlidir.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { HttpModule } from '@angular\/http';\r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n ],\r\n imports: [\r\n BrowserModule, HttpModule\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
\u015eimdi “Laa hocaaa ‘AppComponent’ isimli componentin constructer\u0131nda istenen Http parametresine ‘providers’ de\u011feri g\u00f6ndermeyi unuttun llaa hocaaaa!<\/em><\/strong>” \u015feklinde kendinizi y\u0131rtt\u0131\u011f\u0131n\u0131z\u0131 duyar gibiyim \ud83d\ude42 Var ki bir bildi\u011fimiz eklemedik \ud83d\ude09 E\u011fer ki bir sebebi olmasayd\u0131 ya ilgili componentin ya da mod\u00fcl\u00fcn “providers” \u00f6zelli\u011fine tabi ki de Http nesnesini ekleyecektim. Ama eklemeye gerek duymad\u0131m. \u00c7\u00fc\u00fcnnk\u00fc\u00fc; Http global bir servis oldu\u011fu i\u00e7in ve taray\u0131c\u0131lar taraf\u0131ndan bu servis tan\u0131nd\u0131\u011f\u0131 i\u00e7in herhangi bir yerden bu nesneyi belirtmemiz gerekmemektedir. Gerekli importlar\u0131 yapt\u0131ktan sonra bu servise istedi\u011finiz yerden providerse eklemeye gerek duymaks\u0131z\u0131n ula\u015fabilirsiniz.<\/p>\n
Neyse… Kald\u0131\u011f\u0131m\u0131z yerden devam edersek e\u011fer yapmam\u0131z gereken son ad\u0131m componentte yapm\u0131\u015f oldu\u011fumuz talep neticesinde response datay\u0131 atad\u0131\u011f\u0131m\u0131z “httpData” nesnesini componentin html sayfas\u0131 olan “app.component.html” dosyas\u0131nda kullanmakt\u0131r.<\/p>\n
\r\n<table style="width:70%;">\r\n <thead>\r\n <tr>\r\n <td>Name<\/td>\r\n <td>User Name<\/td>\r\n <td>E-Mail<\/td>\r\n <td>Adress<\/td>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr *ngFor="let data of httpData">\r\n <td>{{data.name}}<\/td>\r\n <td>{{data.username}}<\/td>\r\n <td>{{data.email}}<\/td>\r\n <td style="width: 550px;">\r\n {{data.street}} | {{data.address.suite}} | {{data.address.zipcode}} |{{data.address.city}} | x : {{data.address.geo.lat}}\r\n | y : {{data.address.geo.lng}}\r\n <\/td>\r\n <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n<\/pre>\n
Bu \u015fekilde html sayfam\u0131z\u0131 d\u00fczenledikten sonra uygulamay\u0131 kaydedip yay\u0131nlad\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcne benzer bir \u00e7\u0131kt\u0131yla kar\u015f\u0131la\u015f\u0131yoruz.
\n $\"Angular$ <\/a><\/p>\n
Ve g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi Angular 4 ile Http servisleri bu \u015fekilde kullan\u0131lmaktad\u0131r. Sonraki yaz\u0131m\u0131zda Observable mod\u00fcl\u00fc ile servis s\u00fcre\u00e7lerine asenkron bir a\u00e7\u0131dan yakla\u015faca\u011f\u0131z… Tabi sizler bu makalede gezinirken ben o makalede \u00e7al\u0131\u015f\u0131yor olaca\u011f\u0131m \ud83d\ude42<\/p>\n
O halde g\u00f6r\u00fc\u015fmek \u00fczere dostlar…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Harici verileri almak, posta g\u00f6ndermek vs. gibi i\u015flemler i\u00e7in Http servisini kullanmaktay\u0131z. Haliyle Angular 4 uygulamalar\u0131nda bu i\u015flemler i\u00e7in Http servislerinden nas\u0131l yararlan\u0131laca\u011f\u0131n\u0131 ele alaca\u011f\u0131z. Bu makalemizde Http servislerini kullanmay\u0131 \u00f6rneklendirmek i\u00e7in harici...<\/p>\n","protected":false},"author":1,"featured_media":7246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2146,2228,2227,2229,2226],"class_list":["post-7505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4","tag-angular-4-http-service","tag-angular-4-http-service-nasil-kullanilir","tag-angular-http-service","tag-http-service-nasil-kullanilir"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=7505"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7505\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7246"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Http Service Kullan\u0131m\u0131<\/h4>\nHttp servisinin kullan\u0131m\u0131na dair a\u015fa\u011f\u0131da kod blo\u011funu inceleyebilirsiniz.<\/p>\n