aboutsummaryrefslogtreecommitdiff
path: root/files/vi/web/javascript/reference/statements/async_function/index.html
diff options
context:
space:
mode:
authorRyan Johnson <rjohnson@mozilla.com>2021-04-29 16:16:42 -0700
committerGitHub <noreply@github.com>2021-04-29 16:16:42 -0700
commit95aca4b4d8fa62815d4bd412fff1a364f842814a (patch)
tree5e57661720fe9058d5c7db637e764800b50f9060 /files/vi/web/javascript/reference/statements/async_function/index.html
parentee3b1c87e3c8e72ca130943eed260ad642246581 (diff)
downloadtranslated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip
remove retired locales (#699)
Diffstat (limited to 'files/vi/web/javascript/reference/statements/async_function/index.html')
-rw-r--r--files/vi/web/javascript/reference/statements/async_function/index.html255
1 files changed, 0 insertions, 255 deletions
diff --git a/files/vi/web/javascript/reference/statements/async_function/index.html b/files/vi/web/javascript/reference/statements/async_function/index.html
deleted file mode 100644
index 3009b78083..0000000000
--- a/files/vi/web/javascript/reference/statements/async_function/index.html
+++ /dev/null
@@ -1,255 +0,0 @@
----
-title: async function
-slug: Web/JavaScript/Reference/Statements/async_function
-translation_of: Web/JavaScript/Reference/Statements/async_function
----
-<div>
-<div>{{jsSidebar("Statements")}}<br>
-<span class="seoSummary">Việc tạo hàm với câu lệnh <code><strong>async function</strong></code> sẽ định nghĩa ra một <strong>hàm không đồng bộ (asynchronous function)</strong> - hàm này sẽ trả về một object {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}</span></div>
-
-<p>Các hàm không đồng bộ sẽ hoạt động trong một thứ tự tách biệt so với phần còn lại của đoạn code thông qua một <a href="/en-US/docs/Web/JavaScript/EventLoop">event loop</a>, trả về kết quả là một {{jsxref("Promise")}} tiềm ẩn. Nhưng cú pháp và cấu trúc của đoạn code mà sử dụng các hàm async function trông cứ như những hàm đồng bộ tiêu chuẩn.</p>
-
-<div class="noinclude">
-<p>Bạn cũng có thể định nghĩa các async function với một {{jsxref("Operators/async_function", "async function expression", "", 1)}}.</p>
-</div>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div>
-
-<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
-
-<h2 id="Cú_pháp">Cú pháp</h2>
-
-<pre class="syntaxbox">async function <var>name</var>([<var>param</var>[, <var>param</var>[, ...<var>param</var>]]]) {
- <var>statements</var>
-}
-</pre>
-
-<h3 id="Các_thông_số">Các thông số</h3>
-
-<dl>
- <dt><code><var>name</var></code></dt>
- <dd>Tên của function.</dd>
- <dt><code><var>param</var></code></dt>
- <dd>Tên của một đối số được truyền vào function.</dd>
- <dt><code><var>statements</var></code></dt>
- <dd>Các câu lệnh bao hàm phần thân của function.</dd>
-</dl>
-
-<h3 id="Giá_trị_trả_về">Giá trị trả về</h3>
-
-<p>Một <code><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, cái mà sẽ được giải quyết với giá trị được trả về bởi async function, hoặc được đẩy ra ngoài với một exception không được bắt lại bên trong hàm async function.</p>
-
-<h2 id="Mô_tả">Mô tả</h2>
-
-<p>Một hàm async có thể bao gồm một biểu thức {{jsxref("Operators/await", "await")}}, biểu thức này sẽ tạm dừng việc thực thi của hàm async để chờ cho <code>Promise's resolution</code> được truyền vào, sau đó tiếp tục việc thực thi của hàm <code>async</code> and evaluates as the resolved value.</p>
-
-<p><strong>Từ khóa await chỉ có hiệu lực bên trong hàm <code>async</code>.</strong> Nếu bạn sử dụng nó bên ngoài phần thân của hàm <code>async</code>, bạn sẽ nhận một <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p>
-
-<p>Trong lúc hàm async tạm dừng, hàm được gọi sẽ tiếp tục chạy. (hàm mà nhận được Promise tiềm ẩn được trả về bởi hàm <code>async</code>).</p>
-
-<div class="note">
-<p>Mục đích của <code>async</code>/<code>await</code> là để đơn giả hóa việc sử dụng các promises một cách đồng bộ, và để triển khai một số hoạt động trên một nhóm của các <code>Promises</code>. Nếu <code>Promises </code>là tương tự như các callback có cấu trúc, <code>async</code>/<code>await </code>là tương tự với kết hợp các <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">generators</a> và promises.</p>
-</div>
-
-<h2 id="Ví_dụ">Ví dụ</h2>
-
-<h3 id="Async_functions_và_thứ_tự_của_việc_thực_thi">Async functions và thứ tự của việc thực thi</h3>
-
-<pre class="brush: js">function resolveAfter2Seconds() {
-  console.log("starting slow promise")
-  return new Promise(resolve =&gt; {
-    setTimeout(function() {
-      resolve("slow")
-      console.log("slow promise is done")
-    }, 2000)
-  })
-}
-
-function resolveAfter1Second() {
-  console.log("starting fast promise")
-  return new Promise(resolve =&gt; {
-    setTimeout(function() {
-      resolve("fast")
-      console.log("fast promise is done")
-    }, 1000)
-  })
-}
-
-async function sequentialStart() {
-  console.log('==SEQUENTIAL START==')
-
-  // 1. Execution gets here almost instantly
-  const slow = await resolveAfter2Seconds()
-  console.log(slow) // 2. this runs 2 seconds after 1.
-
-  const fast = await resolveAfter1Second()
-  console.log(fast) // 3. this runs 3 seconds after 1.
-}
-
-async function concurrentStart() {
-  console.log('==CONCURRENT START with await==');
-  const slow = resolveAfter2Seconds() // starts timer immediately
-  const fast = resolveAfter1Second() // starts timer immediately
-
-  // 1. Execution gets here almost instantly
-  console.log(await slow) // 2. this runs 2 seconds after 1.
-  console.log(await fast) // 3. this runs 2 seconds after 1., immediately after 2., since fast is already resolved
-}
-
-function concurrentPromise() {
-  console.log('==CONCURRENT START with Promise.all==')
-  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) =&gt; {
-    console.log(messages[0]) // slow
-    console.log(messages[1]) // fast
-  })
-}
-
-async function parallel() {
-  console.log('==PARALLEL with await Promise.all==')
-
-  // Start 2 "jobs" in parallel and wait for both of them to complete
-  await Promise.all([
-      (async()=&gt;console.log(await resolveAfter2Seconds()))(),
-      (async()=&gt;console.log(await resolveAfter1Second()))()
-  ])
-}
-
-// This function does not handle errors. See warning below!
-function parallelPromise() {
-  console.log('==PARALLEL with Promise.then==')
-  resolveAfter2Seconds().then((message)=&gt;console.log(message))
-  resolveAfter1Second().then((message)=&gt;console.log(message))
-}
-
-sequentialStart() // after 2 seconds, logs "slow", then after 1 more second, "fast"
-
-// wait above to finish
-setTimeout(concurrentStart, 4000) // after 2 seconds, logs "slow" and then "fast"
-
-// wait again
-setTimeout(concurrentPromise, 7000) // same as concurrentStart
-
-// wait again
-setTimeout(parallel, 10000) // truly parallel: after 1 second, logs "fast", then after 1 more second, "slow"
-
-// wait again
-setTimeout(parallelPromise, 13000) // same as parallel
-</pre>
-
-<h4 id="await_và_xử_lý_song_song"><code>await</code> và xử lý song song</h4>
-
-<p>In <code>sequentialStart</code>, execution suspends 2 seconds for the first <code>await</code>, and then another second for the second <code>await</code>. The second timer is not created until the first has already fired, so the code finishes after 3 seconds.</p>
-
-<p>In <code>concurrentStart</code>, both timers are created and then <code>await</code>ed. The timers run concurrently, which means the code finishes in 2 rather than 3 seconds, i.e. the slowest timer.<br>
- However, the <code>await</code> calls still run in series, which means the second <code>await</code> will wait for the first one to finish. In this case, the result of the fastest timer is processed after the slowest.</p>
-
-<p>If you wish to fully perform two or more jobs in parallel, you must use <code>await Promise.all([job1(), job2()])</code>, as shown in the <code>parallel</code> example.</p>
-
-<div class="warning">
-<h4 id="asyncawait_vs_Promise.then_and_error_handling"><code>async</code>/<code>await</code> vs <code>Promise.then</code> and error handling</h4>
-
-<p>Most async functions can also be written as regular functions using Promises. However, <code>async</code> functions are less tricky when it comes to error handling.</p>
-
-<p>Both <code>concurrentStart</code> and <code>concurrentPromise</code> are functionally equivalent:</p>
-
-<ul>
- <li>In <code>concurrentStart</code>, if either of the <code>await</code>ed calls fail, the exception will be automatically caught, the async function execution interrupted, and the Error propagated to the caller through the implicit return Promise.</li>
- <li>For the same to happen in the Promise case, the function must take care of returning a <code>Promise</code> which captures the completion of the function. In <code>concurrentPromise</code> that means <code>return</code>ing the promise from <code>Promise.all([]).then()</code>. As a matter of fact, a previous version of this example forgot to do this!</li>
-</ul>
-
-<p>It is, however, still possible for <code>async</code> functions to mistakenly swallow errors.</p>
-
-<p>Take, for example the <code>parallel</code> async function. If it didn't <code>await</code> (or <code>return</code>) the result of the <code>Promise.all([])</code> call, any Error would not propagate.</p>
-
-<p>While the <code>parallelPromise</code> example seems simpler, it does not handle errors at all! Doing so would require a similar <code>return </code><code>Promise.all([])</code>.</p>
-</div>
-
-<h3 id="Rewriting_a_Promise_chain_with_an_async_function">Rewriting a Promise chain with an <code>async</code> function</h3>
-
-<p>An API that returns a {{jsxref("Promise")}} will result in a promise chain, and it splits the function into many parts. Consider the following code:</p>
-
-<pre class="brush: js">function getProcessedData(url) {
- return downloadData(url) // returns a promise
- .catch(e =&gt; {
- return downloadFallbackData(url) // returns a promise
- })
- .then(v =&gt; {
- return processDataInWorker(v) // returns a promise
- })
-}
-</pre>
-
-<p>it can be rewritten with a single <code>async</code> function as follows:</p>
-
-<pre class="brush: js">async function getProcessedData(url) {
- let v
- try {
- v = await downloadData(url)
- } catch(e) {
- v = await downloadFallbackData(url)
- }
- return processDataInWorker(v)
-}
-</pre>
-
-<p>In the above example, there is no <code>await</code> statement after the <code>return</code> keyword, because the return value of an <code>async function</code> is implicitly wrapped in {{jsxref("Promise.resolve")}}.</p>
-
-<div class="blockIndicator note">
-<h4 id="return_await_promiseValue_vs._return_promiseValue"><code>return await promiseValue</code> vs. <code>return promiseValue</code></h4>
-
-<p>The implicit wrapping of return values in {{jsxref("Promise.resolve")}} does not imply that <code>return await promiseValue</code> is functionally equivalent to <code>return promiseValue</code>.</p>
-
-<p>Consider the following rewrite of the above code. It returns <code>null</code> if <code>processDataInWorker</code> rejects with an error:</p>
-
-<pre class="brush: js">async function getProcessedData(url) {
- let v
- try {
- v = await downloadData(url)
- } catch(e) {
- v = await downloadFallbackData(url)
- }
- try {
- return await processDataInWorker(v) // Note the `return await` vs. just `return`
- } catch (e) {
- return null
- }
-}
-</pre>
-
-<p>Writing <code>return processDataInWorker(v)</code> would have caused the {{jsxref("Promise")}} returned by the function to reject, instead of resolving to <code>null</code> if <code>processDataInWorker(v)</code> rejects.</p>
-
-<p>This highlights the subtle difference between <code>return foo;</code> and <code>return await foo;</code> — <code>return foo</code> immediately returns <code>foo</code> and never throws, even if <code>foo</code> is a Promise that rejects. <code>return await foo</code> will <em>wait </em>for <code>foo</code> to resolve or reject if it's a Promise, and throws <strong>before returning</strong> if it rejects.</p>
-</div>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Specification</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<div>
-
-
-<p>{{Compat("javascript.statements.async_function")}}</p>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
- <li>{{jsxref("AsyncFunction")}} object</li>
- <li>{{jsxref("Operators/await", "await")}}</li>
- <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">"Decorating Async Javascript Functions" on "innolitics.com"</a></li>
-</ul>