Penerjemahan ini sedang berlangsung.

Fetch Data API menyediakan antarmuka untuk pemanggilan sumber daya data(termasuk di seluruh jaringan). Ini akan terasa familiar bagi siapa saja yang telah menggunakan XMLHttpRequest, tetapi untuk API yang terbaru menyediakan serangkaian fitur yang lebih kuat dan fleksibel.

Konsep dan Penggunaan

"Fetch" / pengambilan resource data menyediakan definisi umum yaitu objekRequest dan Response atau permintaan dan tanggapan(dan hal-hal lain yang kaitannya dengan permintaan jaringan/"HTTP"). 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).

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).

Untuk membuat permintaan dan mengambil sumber daya data, bisa menggunakan metode WindowOrWorkerGlobalScope.fetch() ini. Metode ini diimplementasikan dalam beberapa antarmuka aplikasi, khususnya pada Window dan WorkerGlobalScopeIni membuatnya tersedia dalam hampir semua konteks yang mana anda mungkin menginginkan untuk mengambil sumber data / resource nya.

Metode fetch() 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. Hal ini mampu untuk mengembalikan hasil/return Promise yang memutuskan ke Response kepada permintaan itu sendiri, apakah hal tersebut berhasil atau tidak pada saat terjadi response/tanggapan sumber data. Anda juga bisa secara opsional mengirimkan objek pilihan initsebagai argumen keduanya (lihat Request).

Setelah Response telah dipanggil, ada sejumlah metode yang tersedia untuk menentukan apa saja konten tubuh(pikirkan pada elemen html) dan bagaimana penanganannya (lihat Body).

Anda juga bisa membuat permintaan dan response secara langsung menggunakan Request()dan konstruktor Response(), namun Anda tidak bisa melakukan ini secara langsung. Malahan, ini lebih cenderung sebagai hasil dari aksi yang dilakukan oleh API yang lainnya (misalnya, FetchEvent.respondWith() dari service workers (kalo loe yang main teknologinya PWA pasti tau coy)).

Catatan : Cari tahu lebih lanjut mengenai penggunaan fitur Fetch API di cara menggunakan fetch , dan pelajari konsepnya di konsep dasar fetch .

Batalkan fetch

Web browser sudah mulai menambahkan dukungan eksperimental untuk antarmuka AbortController dan AbortSignal(alias API Abort), yang memungkinkan operasi seperti Fetch dan XHR untuk dibatalkan apabila mereka belum selesai secara sempurna dipanggil. Lihat halaman antarmuka untuk detail lebih lanjut.

Browsers have started to add experimental support for the AbortController and AbortSignal interfaces (aka The Abort API), which allow operation

 

Antarmuka metode Fetch

WindowOrWorkerGlobalScope.fetch()
Metode fetch() yang digunakan untuk mengambil sumber data.
Headers
Merupakan header respons / permintaan, memungkinkan Anda untuk menanyakannya(query) dan mengambil tindakan yang berbeda dimana ini tergantung pada hasilnya.
Request
Merupakan permintaan sumber data.
Response
Merupakan respons terhadap permintaan.

Fetch mixin

Body
Menyediakan metode yang berkaitan dengan konten pada respons / permintaan, memungkinkan Anda untuk menyatakan jenis kontennya dan bagaimana penanganannya.

Spesifikasi

Spesifikasi Status Keterangan
Fetch Living Standard Definisi awal

Kompatibilitas Browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 42Edge Full support 14Firefox Full support 39
Full support 39
Full support 34
Disabled
Disabled From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
Full support 52
Notes
Notes fetch() now defined on WindowOrWorkerGlobalScope mixin.
IE No support NoOpera Full support 29
Full support 29
Full support 28
Disabled
Disabled From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari Full support 10.1WebView Android Full support 42Chrome Android Full support 42Edge Mobile Full support 14Firefox Android Full support 39
Full support 39
Full support 34
Disabled
Disabled From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
Full support 52
Notes
Notes fetch() now defined on WindowOrWorkerGlobalScope mixin.
Opera Android ? Safari iOS Full support 10.1Samsung Internet Android ?
Streaming response body
Experimental
Chrome Full support 43Edge Full support 14Firefox Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 29Safari Full support 10WebView Android Full support 43Chrome Android Full support 43Edge Mobile Full support 14Firefox Android No support NoOpera Android No support NoSafari iOS Full support 10Samsung Internet Android ?
Support for blob: and data:
Experimental
Chrome Full support 48Edge No support NoFirefox ? IE No support NoOpera ? Safari ? WebView Android Full support 43Chrome Android Full support 43Edge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
referrerPolicyChrome Full support 52Edge No support NoFirefox Full support 52IE No support NoOpera Full support 39Safari Full support 11.1WebView Android Full support 52Chrome Android Full support 52Edge Mobile No support NoFirefox Android Full support 52Opera Android Full support 39Safari iOS No support NoSamsung Internet Android ?
signal
Experimental
Chrome Full support 66Edge Full support 16Firefox Full support 57IE No support NoOpera Full support 53Safari Full support 11.1WebView Android Full support 66Chrome Android Full support 66Edge Mobile No support NoFirefox Android Full support 57Opera Android Full support 53Safari iOS Full support 11.1Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Lihat juga untuk 

Tag Dokumen dan Kontributor

Kontributor untuk laman ini: mdnwebdocs-bot, arifirmansyah
Terakhir diperbarui oleh: mdnwebdocs-bot,