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
142
|
---
title: Body.arrayBuffer()
slug: Web/API/Body/arrayBuffer
translation_of: Web/API/Body/arrayBuffer
---
<p>{{APIRef("Fetch")}}{{ SeeCompatTable() }}</p>
<p> {{domxref("Body")}}上的<strong><code>方法 arrayBuffer()</code></strong> 接受一个 {{domxref("Response")}} 流, 并等待其读取完成. 它返回一个 promise 实例, 并 resolve 一个 {{domxref("ArrayBuffer")}} 对象.</p>
<h2 id="语法">语法</h2>
<pre class="brush: js">response.arrayBuffer().then(function(buffer) {
// do something with buffer
)};</pre>
<h3 id="参数">参数</h3>
<p>无。</p>
<h3 id="返回值">返回值</h3>
<p>A promise that resolves with an {{domxref("ArrayBuffer")}}.</p>
<h2 id="例子">例子</h2>
<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-array-buffer">fetch array buffer example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-array-buffer/">fetch array buffer live</a>), we have a Play button. When pressed, the <code>getData()</code> function is run.</p>
<p>In <code>getData()</code> we create a new request using the {{domxref("Request.Request")}} constructor, then use it to fetch an OGG music track. We also use {{domxref("AudioContext.createBufferSource")}} to create an audio buffer source. When the fetch is successful, we read an {{domxref("ArrayBuffer")}} out of the response using <code>arrayBuffer()</code>, decode the audio data using {{domxref("AudioContext.decodeAudioData")}}, set the decoded data as the audio buffer source's buffer (<code>source.buffer</code>), then connect the source up to the {{domxref("AudioContext.destination")}}.</p>
<p>Once <code>getData()</code> has finished running, we start the audio source playing with <code>start(0)</code>, then disable the play button so it can't be clicked again when it is already playing (this would cause an error.)</p>
<pre class="brush: js">function getData() {
source = audioCtx.createBufferSource();
var myRequest = new Request('viper.ogg');
fetch(myRequest).then(function(response) {
response.arrayBuffer().then(function(buffer) {
audioCtx.decodeAudioData(buffer, function(decodedData) {
source.buffer = decodedData;
source.connect(audioCtx.destination);
});
});
});
};
// wire up buttons to stop and play audio
play.onclick = function() {
getData();
source.start(0);
play.setAttribute('disabled', 'disabled');
}</pre>
<h2 id="标准">标准</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">标准</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<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(41) }}<sup>[1]</sup><br>
{{ CompatChrome(42) }}<br>
</td>
<td>34<sup>[1]</sup><br>
{{ CompatGeckoDesktop(39)}}</td>
<td>{{ CompatNo }}</td>
<td>
<p>28<sup>[1]</sup><br>
29</p>
</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>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] In Chrome 42, Firefox 34 and Opera 28 support for <code>arrayBuffer()</code> was hidden behind a preference.</p>
<h2 id="参考">参考</h2>
<ul>
<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>
</ul>
<div id="sVim-command" class="hidden">-- NORMAL --</div>
|
