diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/id/web/api/fetch_api/index.html | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/id/web/api/fetch_api/index.html')
-rw-r--r-- | files/id/web/api/fetch_api/index.html | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/files/id/web/api/fetch_api/index.html b/files/id/web/api/fetch_api/index.html new file mode 100644 index 0000000000..ad64ee4558 --- /dev/null +++ b/files/id/web/api/fetch_api/index.html @@ -0,0 +1,88 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +translation_of: Web/API/Fetch_API +--- +<div>{{DefaultAPISidebar("Fetch API")}}</div> + +<p class="summary"><font><font>Fetch Data API menyediakan antarmuka untuk pemanggilan sumber daya data(termasuk di seluruh jaringan). </font><font>Ini akan terasa familiar bagi siapa saja yang telah menggunakan </font></font><span class="seoSummary">{{DOMxRef("XMLHttpRequest")}}</span><font><font>, tetapi untuk API yang terbaru menyediakan serangkaian fitur yang lebih kuat dan fleksibel.</font></font></p> + +<h2 id="Konsep_dan_Penggunaan"><font><font>Konsep dan </font></font><font><font>Penggunaan</font></font></h2> + +<p><font><font>"Fetch" / pengambilan resource data menyediakan definisi umum yaitu objek</font></font>{{DOMxRef("Request")}} dan<font><font> </font></font>{{DOMxRef("Response")}} atau permintaan dan tanggapan<font><font>(dan hal-hal lain yang kaitannya dengan permintaan jaringan/"HTTP"). </font><font>Ini akan memungkinkan "request" dan "response" tersebut untuk digunakan di mana pun mereka dibutuhkan di waktu selanjutnya, apakah itu untuk pekerja layanan/service workers(biasanya PWA), Cache API dan hal-hal serupa lainnya yang menangani atau mengubah permintaan dan tanggapan, ataupun juga segala jenis kasus penggunaan yang mungkin mengharuskan Anda untuk menghasilkan response/tanggapan Anda sendiri secara terprogram (baca aja:scr otomatis).</font></font></p> + +<p>Ini juga memberikan definisi untuk konsep yang berhubungan dengan request dan response seperti halnya : CORS dan sumber semantik header HTTP, yang menggantikan definisi mereka yang terpisah di topik lain (bukan disini bahasannya/beda topik).</p> + +<p><font><font>Untuk membuat permintaan dan mengambil sumber daya data, bisa menggunakan metode </font></font>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} <font><font>ini. Metode </font><font>ini diimplementasikan dalam beberapa antarmuka aplikasi, khususnya pada </font></font>{{DOMxRef("Window")}} <font><font>dan </font></font>{{DOMxRef("WorkerGlobalScope")}}<font><font>. </font><font>Ini membuatnya tersedia dalam hampir semua konteks yang mana anda mungkin menginginkan untuk mengambil sumber data / resource nya.</font></font></p> + +<p><font><font>Metode </font></font><code>fetch()</code><font><font> mengambil satu argumen yang wajib disertakan, path(sbg gambaran kalau di html : tag a dg atribut href) ke sumber data yang anda inginkan untuk mengambilnya. </font><font>Hal ini mampu untuk mengembalikan hasil/return </font></font>{{DOMxRef("Promise")}} <font><font>yang memutuskan ke </font></font>{{DOMxRef("Response")}} kepada <font><font>permintaan itu sendiri, apakah hal tersebut berhasil atau tidak pada saat terjadi response/tanggapan sumber data. Anda juga bisa secara opsional mengirimkan objek pilihan </font></font><code>init</code><font><font>sebagai argumen keduanya (lihat </font></font>{{DOMxRef("Request")}}<font><font>).</font></font></p> + +<p><font><font>Setelah </font></font>{{DOMxRef("Response")}} telah <font><font>dipanggil, ada sejumlah metode yang tersedia untuk menentukan apa saja konten tubuh(pikirkan pada elemen html) dan bagaimana penanganannya (lihat </font></font>{{DOMxRef("Body")}})<font><font>.</font></font></p> + +<p><font><font>Anda juga bisa membuat permintaan dan response secara langsung menggunakan </font></font>{{DOMxRef("Request.Request", "Request()")}}<font><font>dan konstruktor </font></font>{{DOMxRef("Response.Response", "Response()")}}<font><font>, namun Anda tidak bisa melakukan ini secara langsung. </font><font>Malahan, ini lebih cenderung sebagai hasil dari aksi yang dilakukan oleh API yang lainnya (misalnya, </font></font>{{DOMxRef("FetchEvent.respondWith()")}} <font><font>dari </font></font>service workers (kalo loe yang main teknologinya PWA pasti tau coy)<font><font>).</font></font></p> + +<div class="note"> +<p><strong><font><font>Catatan</font></font></strong><font><font> : Cari tahu lebih lanjut mengenai penggunaan fitur Fetch API di </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch"><font><font>cara menggunakan fetch</font></font></a><font><font> , dan pelajari konsepnya di </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Basic_concepts"><font><font>konsep dasar fetch </font></font></a><font><font>.</font></font></p> +</div> + +<h3 id="Batalkan_fetch">Batalkan fetch</h3> + +<p><font><font>Web browser sudah mulai menambahkan dukungan eksperimental untuk </font><font>antarmuka </font></font>{{DOMxRef("AbortController")}} <font><font>dan </font></font>{{DOMxRef("AbortSignal")}}<font><font>(alias API Abort), yang memungkinkan operasi seperti Fetch dan XHR untuk dibatalkan apabila mereka belum selesai secara sempurna dipanggil. </font><font>Lihat halaman antarmuka untuk detail lebih lanjut.</font></font></p> + +<p>Browsers have started to add experimental support for the {{DOMxRef("AbortController")}} and {{DOMxRef("AbortSignal")}} interfaces (aka The Abort API), which allow operation</p> + +<p> </p> + +<h2 id="Antarmuka_metode_Fetch"><font><font>Antarmuka metode Fetch</font></font></h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch" title="Metode fetch () dari mixin WindowOrWorkerGlobalScope memulai proses pengambilan sumber daya dari jaringan. Ini mengembalikan janji yang diselesaikan ke objek Respons yang mewakili respons terhadap permintaan Anda. Janji tidak menolak kesalahan HTTP - melainkan hanya menolak kesalahan jaringan; maka penangan harus memeriksa kesalahan HTTP."><code>WindowOrWorkerGlobalScope.fetch()</code></a></dt> + <dd><font><font>Metode </font></font><code>fetch()</code><font><font> yang digunakan untuk mengambil sumber data.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Headers" title="Antarmuka Header dari Fetch API memungkinkan Anda untuk melakukan berbagai tindakan pada permintaan HTTP dan header respons. Tindakan ini termasuk mengambil, mengatur, menambah, dan menghapus. Objek Header memiliki daftar header terkait, yang awalnya kosong dan terdiri dari nol atau lebih pasangan nama dan nilai. Anda dapat menambahkan ini menggunakan metode seperti append () (lihat Contoh.) Di semua metode antarmuka ini, nama header dicocokkan dengan urutan byte case-insensitive."><code>Headers</code></a></dt> + <dd><font><font>Merupakan header respons / permintaan, memungkinkan Anda untuk menanyakannya(query) dan mengambil tindakan yang berbeda dimana ini tergantung pada hasilnya.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Request" title="Antarmuka Permintaan API Ambil mewakili permintaan sumber daya."><code>Request</code></a></dt> + <dd><font><font>Merupakan permintaan sumber data.</font></font></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Response" title="Antarmuka Respons API Ambil mewakili respons terhadap permintaan."><code>Response</code></a></dt> + <dd><font><font>Merupakan respons terhadap permintaan.</font></font></dd> +</dl> + +<h2 id="Fetch_mixin">Fetch mixin</h2> + +<dl> + <dt>{{DOMxRef("Body")}}</dt> + <dd><font><font>Menyediakan metode yang berkaitan dengan konten pada respons / permintaan, memungkinkan Anda untuk menyatakan jenis kontennya dan bagaimana penanganannya.</font></font></dd> +</dl> + +<h2 id="Spesifikasi">Spesifikasi</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasi</th> + <th scope="col">Status</th> + <th scope="col">Keterangan</th> + </tr> + <tr> + <td>{{SpecName("Fetch")}}</td> + <td>{{Spec2("Fetch")}}</td> + <td>Definisi awal</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitas_Browser">Kompatibilitas Browser</h2> + + + +<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> + +<h2 id="Lihat_juga_untuk">Lihat juga untuk </h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Penggunaan metode Fetch</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> + <li>M<a href="https://github.com/github/fetch">etode Fetch untuk polyfill</a></li> + <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Konsep dasar Fetch</a></li> +</ul> |