1 files changed, 66 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/fetch_api/basic_concepts/index.html b/files/zh-cn/web/api/fetch_api/basic_concepts/index.html
new file mode 100644
index 0000000000..fc87d2c5ef
--- /dev/null
+++ b/files/zh-cn/web/api/fetch_api/basic_concepts/index.html
@@ -0,0 +1,66 @@
+---
+title: Fetch 基本概念
+slug: Web/API/Fetch_API/Basic_concepts
+translation_of: Web/API/Fetch_API/Basic_concepts
+---
+<p>{{DefaultAPISidebar("Fetch API")}}{{draft}}</p>
+
+<div class="summary">
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 是一个现代的概念, 等同于 <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>。它提供了许多与XMLHttpRequest相同的功能，但被设计成更具可扩展性和高效性。本文介绍了 Fetch API的一些基本概念。</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 这篇文章可能还需要修改。如果你觉得有的概念可以解释的更好，<span class="short_text" id="result_box" lang="zh-CN"><span>让人们在<a href="https://discourse.mozilla-community.org/c/mdn">MDN论坛</a>上知道</span></span>，或 <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> (#mdn room)。</p>
+</div>
+
+<h2 id="简而言之">简而言之</h2>
+
+<p>Fetch 的核心在于对 HTTP 接口的抽象，包括 {{domxref("Request")}}，{{domxref("Response")}}，{{domxref("Headers")}}，{{domxref("Body")}}，以及用于初始化异步请求的 {{domxref("GlobalFetch.fetch","global fetch")}}。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。</p>
+
+<p><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a> 是大量使用Fetch的API的一个示例。</p>
+
+<p>除此之外，Fetch 还利用到了请求的异步特性——它是基于 {{jsxref("Promise-based","Promise")}} 的。</p>
+
+<h2 id="Guard">Guard</h2>
+
+<p>Guard 是 {{domxref("Headers")}} 对象的特性，基于不同的情况，它可以有以下取值：<code>immutable、</code><code>request<font face="Open Sans, Arial, sans-serif">、</font></code><code>request-no-cors<font face="Open Sans, Arial, sans-serif">、</font></code><code>response 或<font face="Open Sans, Arial, sans-serif"> </font></code><code>none。</code></p>
+
+<p>当使用 {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}} 创建一个新的 {{domxref("Headers")}} 对象的时候，它的 guard 被设置成 <code>none（默认值）。当创建 </code>{{domxref("Request")}} 或 {{domxref("Response")}} 对象的时候，它将拥有一个按照以下规则实现的与之关联的 {{domxref("Headers")}} 对象：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">新对象的类型</th>
+   <th scope="col">创建时的构造函数</th>
+   <th scope="col">关联的 {{domxref("Headers")}} 对象的 guard</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="2">{{domxref("Request")}}</td>
+   <td>{{domxref("Request.Request","Request()")}}</td>
+   <td><code>request</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Request.Request","Request()")}}，{{domxref("Request.mode","mode")}} 设置成 <code>no-cors</code></td>
+   <td><code>request-no-cors</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">{{domxref("Response")}}</td>
+   <td>{{domxref("Response.Response","Response()")}}</td>
+   <td><code>response</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Response.error","error()")}} 或 {{domxref("Response.redirect","redirect()")}} 方法</td>
+   <td><code>immutable</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>头信息的 guard 会影响 {{domxref("Headers.set","set()")}}、{{domxref("Headers.delete","delete()")}} 和 {{domxref("Headers.append","append()")}} 方法。如果你试图修改 guard 是 <code>immutable 的 </code>{{domxref("Headers")}} 对象，那么会抛出一个 <code>TypeError。以下情况则不会抛出错误：</code></p>
+
+<ul>
+ <li>guard 是 <code title="">request</code> 并且头信息中的 <var>name</var> 不是 {{Glossary("forbidden header name")}}</li>
+ <li>guard 是 <code title="">request-no-cors</code> 并且头信息中的 <var>name</var>/<var>value</var> 是 {{Glossary("simple header")}}</li>
+ <li>guard 是 <code title="">response</code> 并且头信息中的 <var>name</var> 不是 {{Glossary("forbidden response header name")}}</li>
+</ul>