---
title: Fetch API
slug: Web/API/Fetch_API
translation_of: Web/API/Fetch_API
---
<div>{{DefaultAPISidebar("Fetch API")}}</div>

<p class="summary"><span class="seoSummary">The Fetch API cung cấp giao diện để tìm nạp tài nguyên (bao gồm thông qua mạng). It will seem familiar to anyone who has used {{DOMxRef("XMLHttpRequest")}}, but the new API provides a more powerful and flexible feature set.</span></p>

<h2 id="Concepts_and_usage">Concepts and usage</h2>

<p>Fetch cung cấp một định nghĩa chung về các đối tượng {{DOMxRef("Request")}} and {{DOMxRef("Response")}} (và mọi thứ khác liên quan đến các request network). Điều này cho phép chúng được sử dụng ở bất cứ nơi nào cần chúng trong tương lai, cho dù đó là service workers, Cache API, và những thứ tương tự khác mà có khả năng xử lý hoặc sửa đổi các request và responses, hoặc bất kỳ trường hợp nào mà yêu cầu bạn tự tạo ra responses trong chương trình của chính mình.</p>

<p>Nó cũng cung cấp một định nghĩa cho các khái niệm liên quan như CORS and the HTTP Header, thay thế các định nghĩa riêng biệt của chúng ở nơi khác.</p>

<p>Để thực hiện một request và tìm nạp tài nguyên, use the {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} method. Nó được triển khai trong nhiều interfaces, đặc biệt là {{DOMxRef("Window")}} và {{DOMxRef("WorkerGlobalScope")}}. Điều này làm cho nó có sẵn trong hầu hết mọi ngữ cảnh mà bạn có thể muốn tìm nạp tài nguyên.</p>

<p>The <code>fetch()</code> method có một đối số bắt buộc, đó chính là đường dẫn đến tài nguyên bạn tìm nạp. Nó returns a {{DOMxRef("Promise")}} thứ mà sẽ giải quyết và đưa ra một {{DOMxRef("Response")}} cho request đó, bất kể là thành công hay thất bại. Bạn có thể tùy chỉnh việc truyền một đối tượng tùy chỉnh init như là một đối số thữ hai (see {{DOMxRef("Request")}}).</p>

<p>Cho đến khi một {{DOMxRef("Response")}} được truy xuất, có một số methods có sẵn để xác định nội dung body là gì và cách nó được xử lý như thế nào. (see {{DOMxRef("Body")}}).</p>

<p>Bạn có thể tạo ra một request và response trực tiếp bằng cách sử dụng {{DOMxRef("Request.Request", "Request()")}} và {{DOMxRef("Response.Response", "Response()")}} constructors, nhưng cách làm này là không phổ biến. Thay vào đó, những thứ này có thể được tạo ra bằng cách là kết quả trả về của các hành động API khác (ví dụ, {{DOMxRef("FetchEvent.respondWith()")}} from service workers).</p>

<h3 id="Differences_from_jQuery">Differences from jQuery</h3>

<p>The <code>fetch</code> khác với <code>jQuery.ajax()</code> in ba điểm chính sau:</p>

<ul>
 <li>The Promise được trả về từ <code>fetch()</code> <strong>sẽ không từ chối trạng thái lỗi</strong> ngay cả khi response là HTTP <code>404</code> or <code>500</code>. Thay vào đó, nó sẽ xử lý bình thường (với trạng thái OK được set thành <code>false</code>), và nó sẽ chỉ từ chối khi gặp lỗi network hoặc có bất cứ thứ gì ngăn chặn hoàn thành request.</li>
 <li><code>fetch()</code> sẽ không nhận<strong> cross-site cookies. </strong>You không thể thiết lập một cross site session bằng <code>fetch()</code>. <code><a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a></code> headers từ các site khác sẽ âm thầm bị bỏ qua.</li>
 <li><code>fetch()</code> sẽ không<strong> send cookies</strong>, trừ khi bạn set the <code><var>credentials</var></code> <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init option</a>.
  <ul>
   <li>Từ <a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">Tháng 8 25, 2017</a>: Thông số kĩ thuật đã thay đổi từ thông tin đăng nhập mặc định thành <code>same-origin</code>. Firefox đã thay đổi từ phiên bản 61.0b13.)</li>
  </ul>
 </li>
</ul>

<div class="note">
<p><strong>Note</strong>: Tìm hiểu thêm về cách sử dụng Fetch API tại <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>, và học các khái niệm tại  <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</p>
</div>

<h3 id="Huỷ_bỏ_fetch">Huỷ bỏ fetch</h3>

<p>Browsers have started to add experimental support for the {{DOMxRef("AbortController")}} and {{DOMxRef("AbortSignal")}} interfaces (aka The Abort API), which allow operations like Fetch and XHR to be aborted if they have not already completed. See the interface pages for more details.</p>

<h2 id="Fetch_Interfaces">Fetch Interfaces</h2>

<dl>
 <dt>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}</dt>
 <dd>The <code>fetch()</code> method được sử dụng để tìm nạp tài nguyên.</dd>
 <dt>{{DOMxRef("Headers")}}</dt>
 <dd>Đại diện cho các response/request headers, cho phép bạn truy vấn chúng and thực hiện các hành động khác nhau phụ thuộc vào các kết quả..</dd>
 <dt>{{DOMxRef("Request")}}</dt>
 <dd>Đại điện cho một request tài nguyên.</dd>
 <dt>{{DOMxRef("Response")}}</dt>
 <dd>Đại điện cho một Response của một Request.</dd>
</dl>

<h2 id="Fetch_mixin">Fetch mixin</h2>

<dl>
 <dt>{{DOMxRef("Body")}}</dt>
 <dd>Cung cấp các methods liên quan đến body của response/request, cho phép bạn khai báo kiểu nội dung của chúng và cách chúng được xử lý.</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Fetch")}}</td>
   <td>{{Spec2("Fetch")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using 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><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
 <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
</ul>