aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/fetchevent/respondwith/index.html
blob: 0840832a0fee40d767156ea89ce6c8c7a1a9cb55 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
---
title: FetchEvent.respondWith()
slug: Web/API/FetchEvent/respondWith
translation_of: Web/API/FetchEvent/respondWith
---
<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>

<p>{{domxref("FetchEvent")}} 接口的 <strong><code>respondWith()</code></strong> 方法旨在包裹代码,这些代码为来自受控页面的request生成自定义的response。这些代码通过返回一个 {{domxref("Response")}} 、 <a class="external external-icon" href="http://fetch.spec.whatwg.org/#concept-network-error">network error</a> 或者 <code><a class="external external-icon" href="http://fetch.spec.whatwg.org/#concept-fetch">Fetch</a>的方式</code>resolve。</p>

<p>有关跨域内容污染的渲染端安全检测与 {{domxref("Response")}} 体的透明度(或者不透明度)相关联,而不是URL。如果request是一个顶级的导航,而返回值是一个类型属性不透明的 {{domxref("Response")}}(即不透明响应体),一个 <a class="external external-icon" href="http://fetch.spec.whatwg.org/#concept-network-error">network error</a> 将被返回给 <code><a class="external external-icon" href="http://fetch.spec.whatwg.org/#concept-fetch">Fetch</a>。所有成功(非网络错误)响</code>应的最终URL是请求的URL。</p>

<h2 id="语法">语法</h2>

<pre class="brush: js">FetchEvent.respondWith(
  //Promise that resolves to a Response or a network error.
​)</pre>

<h3 id="返回值">返回值</h3>

<p>Void.</p>

<h3 id="参数">参数</h3>

<p>任何自定义的响应生成代码。</p>

<h2 id="示例">示例</h2>

<p>该代码片段来自 <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">service worker fetch sample</a> (<a class="external external-icon" href="https://googlechrome.github.io/samples/service-worker/prefetch/">run the fetch sample live</a>)。 {{domxref("ServiceWorkerGlobalScope.onfetch")}} 事件处理程序侦听 {{event("fetch")}} 事件。当触发时,{{domxref("FetchEvent.respondWith", "FetchEvent.respondWith(any value)")}} 返回一个promise给受控页面。该promise在 {{domxref("Cache")}} 对象中查询第一个匹配URL请求。如果没有发现匹配项,该代码将转而从网络获取响应。</p>

<p>该代码也处理从 {{domxref("ServiceWorkerGlobalScope.fetch")}} 操作中抛出的异常。请注意,HTTP错误响应(例如404)不会触发异常。 它将返回具有相应错误代码集的正常响应对象。</p>

<pre class="brush: js">self.addEventListener('fetch', function(event) {
  console.log('Handling fetch event for', event.request.url);

  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log('Found response in cache:', response);

        return response;
      }
      console.log('No response found in cache. About to fetch from network...');

      return fetch(event.request).then(function(response) {
        console.log('Response from network is:', response);

        return response;
      }).catch(function(error) {
        console.error('Fetching failed:', error);

        throw error;
      });
    })
  );
});</pre>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Service Workers', '#fetch-event-respondwith-method', 'respondWith()')}}</td>
   <td>{{Spec2('Service Workers')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(40.0)}}</td>
   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>24</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{ CompatGeckoMobile("44.0") }}</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(44.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p>

<h2 id="请参见">请参见</h2>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
 <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
 <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
 <li>{{jsxref("Promise")}}</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
</ul>