Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

update website

Browse Source
This commit is contained in:
Travis CI
2015-11-02 18:09:15 +00:00
parent 8eed99bcf8
commit 0a7017f973
1 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/network.html
+19 -2
View File
@@ -12,14 +12,31 @@ request<span class="token punctuation">.</span>onreadystatechange <span class="t
<span class="token punctuation">}</span><span class="token punctuation">;</span>
request<span class="token punctuation">.</span><span class="token function">open<span class="token punctuation">(</span></span><span class="token string">&#x27;GET&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;https://mywebsite.com/endpoint.php&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
request<span class="token punctuation">.</span><span class="token function">send<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Please follow the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank">MDN Documentation</a> for a complete description of the API.</p><p>As a developer, you&#x27;re probably not going to use XMLHttpRequest directly as its API is very tedious to work with. But the fact that it is implemented and compatible with the browser API gives you the ability to use third-party libraries such as <a href="https://parse.com/products/javascript" target="_blank">Parse</a> or <a href="https://github.com/visionmedia/superagent" target="_blank">super-agent</a> directly from npm.</p><h2><a class="anchor" name="fetch"></a>Fetch <a class="hash-link" href="#fetch">#</a></h2><p><a href="https://fetch.spec.whatwg.org/" target="_blank">fetch</a> is a better networking API being worked on by the standard committee and is already available in Chrome. It is available in React Native by default.</p><div class="prism language-javascript"><span class="token function">fetch<span class="token punctuation">(</span></span><span class="token string">&#x27;https://mywebsite.com/endpoint.php&#x27;</span><span class="token punctuation">)</span>
request<span class="token punctuation">.</span><span class="token function">send<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Please follow the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank">MDN Documentation</a> for a complete description of the API.</p><p>As a developer, you&#x27;re probably not going to use XMLHttpRequest directly as its API is very tedious to work with. But the fact that it is implemented and compatible with the browser API gives you the ability to use third-party libraries such as <a href="https://parse.com/products/javascript" target="_blank">Parse</a> or <a href="https://github.com/visionmedia/superagent" target="_blank">super-agent</a> directly from npm.</p><h2><a class="anchor" name="fetch"></a>Fetch <a class="hash-link" href="#fetch">#</a></h2><p><a href="https://fetch.spec.whatwg.org/" target="_blank">fetch</a> is a better networking API being worked on by the standards committee and is already available in Chrome. It is available in React Native by default.</p><h4><a class="anchor" name="usage"></a>Usage <a class="hash-link" href="#usage">#</a></h4><div class="prism language-javascript"><span class="token function">fetch<span class="token punctuation">(</span></span><span class="token string">&#x27;https://mywebsite.com/endpoint/&#x27;</span><span class="token punctuation">)</span></div><p>Include a request object as the optional second argument to customize the HTTP request:</p><div class="prism language-javascript"><span class="token function">fetch<span class="token punctuation">(</span></span><span class="token string">&#x27;https://mywebsite.com/endpoint/&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
method<span class="token punctuation">:</span> <span class="token string">&#x27;POST&#x27;</span><span class="token punctuation">,</span>
headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token string">&#x27;Accept&#x27;</span><span class="token punctuation">:</span> <span class="token string">&#x27;application/json&#x27;</span><span class="token punctuation">,</span>
<span class="token string">&#x27;Content-Type&#x27;</span><span class="token punctuation">:</span> <span class="token string">&#x27;application/json&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
body<span class="token punctuation">:</span> JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
firstParam<span class="token punctuation">:</span> <span class="token string">&#x27;yourValue&#x27;</span><span class="token punctuation">,</span>
secondParam<span class="token punctuation">:</span> <span class="token string">&#x27;yourOtherValue&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></div><h4><a class="anchor" name="async"></a>Async <a class="hash-link" href="#async">#</a></h4><p><code>fetch</code> returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">Promise</a> that can be processed in two ways:</p><ol><li>Using <code>then</code> and <code>catch</code> in synchronous code:</li></ol><div class="prism language-javascript"><span class="token function">fetch<span class="token punctuation">(</span></span><span class="token string">&#x27;https://mywebsite.com/endpoint.php&#x27;</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> response<span class="token punctuation">.</span><span class="token function">text<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>responseText<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">warn<span class="token punctuation">(</span></span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="websocket"></a>WebSocket <a class="hash-link" href="#websocket">#</a></h2><p>WebSocket is a protocol providing full-duplex communication channels over a single TCP connection.</p><div class="prism language-javascript"><span class="token keyword">var</span> ws <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WebSocket</span><span class="token punctuation">(</span><span class="token string">&#x27;ws://host.com/path&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><ol><li>Called within an asynchronous function using ES7 <code>async</code>/<code>await</code> syntax:</li></ol><div class="prism language-javascript">async <span class="token function">getUsersFromApi<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> response <span class="token operator">=</span> await <span class="token function">fetch<span class="token punctuation">(</span></span><span class="token string">&#x27;https://mywebsite.com/endpoint/&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> response<span class="token punctuation">.</span>users<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">throw</span> error<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><ul><li>Note: Errors thrown by rejected Promises need to be caught, or they will be swallowed silently</li></ul><h2><a class="anchor" name="websocket"></a>WebSocket <a class="hash-link" href="#websocket">#</a></h2><p>WebSocket is a protocol providing full-duplex communication channels over a single TCP connection.</p><div class="prism language-javascript"><span class="token keyword">var</span> ws <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WebSocket</span><span class="token punctuation">(</span><span class="token string">&#x27;ws://host.com/path&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
ws<span class="token punctuation">.</span><span class="token function">on<span class="token punctuation">(</span></span><span class="token string">&#x27;open&#x27;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // connection opened