js同步等待ajax结果返回

我就是我 2024-04-18 03:37 83阅读 0赞

## JavaScript中的await/async的作用和用法 ##

await/async 是 ES7 最重要特性之一，它是目前为止 JS 最佳的异步解决方案了。这篇文章主要介绍了JavaScript中的await/async的作用和用法的相关资料

await/async 是 ES7 最重要特性之一，它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入，但很快就到来，目前已经在 ES-Next [Stage 4 阶段][Stage 4]。

直接上例子，比如我们需要按顺序获取：产品数据=>用户数据=>评论数据

**老朋友 Ajax**

传统的写法，无需解释

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>// 获取产品数据</code> <code>ajax(</code><code>'products.json'</code><code>, (products) =&gt; { </code> <code>console.log(</code><code>'AJAX/products &gt;&gt;&gt;'</code><code>, JSON.parse(products));</code> <code>// 获取用户数据</code> <code>ajax(</code><code>'users.json'</code><code>, (users) =&gt; { </code> <code>console.log(</code><code>'AJAX/users &gt;&gt;&gt;'</code><code>, JSON.parse(users));</code> <code>// 获取评论数据</code> <code>ajax(</code><code>'products.json'</code><code>, (comments) =&gt; { </code> <code>console.log(</code><code>'AJAX/comments &gt;&gt;&gt;'</code><code>, JSON.parse(comments));</code> <code>});</code> <code>});</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**不算新的朋友 Promise**

Promise 已经被提及已久了，也是 ES6 的一部分。Promise 能消除 callback hell 带来的厄运金字塔，相比起来代码更清晰了。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </td> 
 <td> <code>// Promise</code> <code>// 封装 Ajax，返回一个 Promise</code> <code>function</code> <code>requestP(url) { </code> <code>return</code> <code>new</code> <code>Promise(</code><code>function</code><code>(resolve, reject) { </code> <code>ajax(url, (response) =&gt; { </code> <code>resolve(JSON.parse(response));</code> <code>});</code> <code>});</code> <code>}</code> <code>// 获取产品数据</code> <code>requestP(</code><code>'products.json'</code><code>).then(</code><code>function</code><code>(products){ </code> <code>console.log(</code><code>'Promises/products &gt;&gt;&gt;'</code><code>, products);</code> <code>});</code> <code>// 获取用户数据</code> <code>requestP(</code><code>'users.json'</code><code>).then(</code><code>function</code><code>(users){ </code> <code>console.log(</code><code>'Promises/users &gt;&gt;&gt;'</code><code>, users);</code> <code>});</code> <code>// 获取评论数据</code> <code>requestP(</code><code>'comments.json'</code><code>).then(</code><code>function</code><code>(comments){ </code> <code>console.log(</code><code>'Promises/comments &gt;&gt;&gt;'</code><code>, comments);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

当然使用[Promise.all ][Promise.all]可以更简洁

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>Promise.all([</code> <code>requestP(</code><code>'products.json'</code><code>),</code> <code>requestP(</code><code>'users.json'</code><code>),</code> <code>requestP(</code><code>'comments.json'</code><code>)</code> <code>])</code> <code>.then(</code><code>function</code><code>(data) { </code> <code>console.log(</code><code>'Parallel promises &gt;&gt;&gt;'</code><code>, data);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**强劲的新朋友 Generators**

Generators 也是 ES6 一个新的特性，能够 暂停/执行 代码。yield 表示暂停，iterator.next 表示执行下一步，如果你不了解 Generators 也没关系，可以忽略它直接学习 await/async。

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>// Generators</code> <code>function</code> <code>request(url) { </code> <code>ajax(url, (response) =&gt; { </code> <code>iterator.next(JSON.parse(response));</code> <code>});</code> <code>}</code> <code>function</code> <code>*main() { </code> <code>// 获取产品数据</code> <code>let data = yield request(</code><code>'products.json'</code><code>);</code> <code>// 获取用户数据</code> <code>let users = yield request(</code><code>'users.json'</code><code>);</code> <code>// 获取评论数据</code> <code>let products = yield request(</code><code>'comments.json'</code><code>);</code> <code>console.log(</code><code>'Generator/products &gt;&gt;&gt;'</code><code>, products);</code> <code>console.log(</code><code>'Generator/users &gt;&gt;&gt;'</code><code>, users);</code> <code>console.log(</code><code>'Generator/comments &gt;&gt;&gt;'</code><code>, comments);</code> <code>}</code> <code>var</code> <code>iterator = main();</code> <code>iterator.next();</code> </td> 
 </tr> 
 </tbody> 
</table>

**碉堡的朋友 await/async**

与 Promise 结合使用

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>// 封装 Ajax，返回一个 Promise</code> <code>function</code> <code>requestP(url) { </code> <code>return</code> <code>new</code> <code>Promise(</code><code>function</code><code>(resolve, reject) { </code> <code>ajax(url, (response) =&gt; { </code> <code>resolve(JSON.parse(response));</code> <code>});</code> <code>});</code> <code>}</code> <code>(async () =&gt; { </code> <code>// 获取产品数据</code> <code>let data = await requestP(</code><code>'products.json'</code><code>);</code> <code>// 获取用户数据</code> <code>let users = await requestP(</code><code>'users.json'</code><code>);</code> <code>// 获取评论数据</code> <code>let products = await requestP(</code><code>'comments.json'</code><code>);</code> <code>console.log(</code><code>'ES7 Async/products &gt;&gt;&gt;'</code><code>, products);</code> <code>console.log(</code><code>'ES7 Async/users &gt;&gt;&gt;'</code><code>, users);</code> <code>console.log(</code><code>'ES7 Async/comments &gt;&gt;&gt;'</code><code>, comments);</code> <code>}());</code> </td> 
 </tr> 
 </tbody> 
</table>

与 Fetch API 结合使用：

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </td> 
 <td> <code>(async () =&gt; { </code> <code>// Async/await using the fetch API</code> <code>try</code> <code>{ </code> <code>// 获取产品数据</code> <code>let products = await fetch(</code><code>'products.json'</code><code>);</code> <code>// Parsing products</code> <code>let parsedProducts = await products.json();</code> <code>// 获取用户数据</code> <code>let users = await fetch(</code><code>'users.json'</code><code>);</code> <code>// Parsing users</code> <code>let parsedUsers = await users.json();</code> <code>// 获取评论数据</code> <code>let comments = await fetch(</code><code>'comments.json'</code><code>);</code> <code>// Parsing comments</code> <code>let parsedComments = await comments.json();</code> <code>console.log(</code><code>'ES7 Async+fetch/products &gt;&gt;&gt;'</code><code>, parsedProducts);</code> <code>console.log(</code><code>'ES7 Async+fetch/users &gt;&gt;&gt;'</code><code>, parsedUsers);</code> <code>console.log(</code><code>'ES7 Async+fetch/comments &gt;&gt;&gt;'</code><code>, parsedComments);</code> <code>} </code><code>catch</code> <code>(error) { </code> <code>console.log(error);</code> <code>}</code> <code>}());</code> </td> 
 </tr> 
 </tbody> 
</table>

按数组顺序执行

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>(async () =&gt; { </code> <code>let parallelData = await* [</code> <code>requestP(</code><code>'products.json'</code><code>),</code> <code>requestP(</code><code>'users.json'</code><code>),</code> <code>requestP(</code><code>'comments.json'</code><code>)</code> <code>];</code> <code>console.log(</code><code>'Async parallel &gt;&gt;&gt;'</code><code>, parallelData);</code> <code>}());</code> </td> 
 </tr> 
 </tbody> 
</table>

再次结合 Fetch

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>(async () =&gt; { </code> <code>let parallelDataFetch = await* [</code> <code>(await fetch(</code><code>'products.json'</code><code>)).json(),</code> <code>(await fetch(</code><code>'users.json'</code><code>)).json(),</code> <code>(await fetch(</code><code>'comments.json'</code><code>)).json()</code> <code>];</code> <code>console.log(</code><code>'Async parallel+fetch &gt;&gt;&gt;'</code><code>, parallelDataFetch);</code> <code>}());</code> </td> 
 </tr> 
 </tbody> 
</table>

使用 await/async 用同步的思维去解决异步的代码，感觉非常酷非常爽！关于js中的await/async的作用和用法就给大家介绍这么多，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

[Stage 4]: https://github.com/hemanth/es-next#async-functions
[Link 1]: https://www.jb51.net/article/96100.htm#
[Promise.all]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all