在前端开发中，经常会有需要轮训请求或者同时发出多个异步请求的需求。这些场景对于开发人员来说比较常见，但是如果没有得到有效的解决，可能会给开发带来很大的困扰。
幸运的是，ES6 中引入的 async/await 函数可以很好的解决这些问题。本文将从基础入手，详细讲解利用 ES6 中的 async 函数实现轮训请求及解决多个异步请求问题，并提供示例代码和实际应用指导。
基础概念
在开始讲解之前，先简单介绍一下 async/await 函数的基础概念。
async 函数是异步函数的一种新语法，它可以让我们以同步代码的方式编写异步代码。使用 async 关键字声明的函数会返回一个 Promise 对象，而函数内部使用 await 关键字可以暂停代码执行，直到 Promise 对象状态为 resolved 才会继续执行。
下面是一个简单的 async 函数示例代码：
----- -------- --------- - ----- -------- - ----- ---------------------------------- ----- ---- - ----- ---------------- ------ ----- -
在这个例子中，我们定义了一个 async 函数，它会发起一个请求并等待响应返回。使用 await 关键字暂停了代码执行，等待 Promise 对象状态为 resolved 后再继续执行代码，并返回响应结果数据。
轮训请求实现
轮训请求是指在一定时间间隔内反复发起请求，以获取最新数据的一种方式。这在实时数据更新的应用场景中非常常见。
使用 async/await 函数可以很方便的实现轮训请求。下面是一个示例代码：
----- -------- ---------------- --------- -
----- ------ -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------------------
----- ----------------
-
-
-------- ------------------- -
------ --- --------------- -- ------------------- ---------------
-
--------------------------------------- ------在这个例子中，我们定义了一个 pollRequest 函数，它会不断地发送请求，每次请求完后暂停指定时间间隔。delay 函数是用来延迟指定时间的，返回一个 Promise 对象。
我们可以通过调用 pollRequest 函数并传递需要轮训的接口地址和时间间隔来实现轮训请求。该函数具有以下特性：
- 以异步函数的方式编写，使用 await 关键字暂停执行，等待异步操作完成后再继续执行。
- 使用 while(true) 循环实现反复发送请求的效果。
- 使用 delay 函数进行指定时间间隔的暂停操作。
解决多个异步请求问题
在前端开发中，可能会遇到需要同时发出多个异步请求的场景，例如同时获取多个用户数据或者同时提交多个表单数据。
使用基础的 Promise.all() 方法可以实现同时发送多个请求并等待所有请求完成后再执行下一步操作。但是当其中某个请求失败时，整个操作就会失败，无法得到结果。
而通过 async/await 函数结合 try...catch 语句可以解决这个问题。下面是一个示例代码：
----- -------- --------- -
--- -
----- ---------- ------------ ---------- - ----- -------------
--------------------------------------
-----------------------------------------
--------------------------------------
---
----- ---- - ----- ----------------
----- ------- - ----- -------------------
----- ----- - ----- -----------------
----------------- -------- -------
- ----- ------- -
---------------------
-
-
----------在这个例子中，我们定义了一个 getData 函数，它会同时发出多个异步请求并等待所有请求完成。使用 Promise.all() 方法将所有请求包裹在一个数组中，这样可以将请求作为一个整体来管理。通过解构赋值将请求返回数据分别赋值到 userData、accountData 和 otherData 变量中。
然后，我们分别使用 await 关键字等待每个请求的响应数据，将结果使用解构赋值分别获取到 user、account 和 other 变量中。最后对结果进行输出操作。
通过 try...catch 语句捕获错误并进行处理，这样即使其中某个请求失败了，也不会影响整个操作的结果。
总结
上述内容介绍了利用 ES6 中的 async 函数实现轮训请求及解决多个异步请求问题的方法，涵盖了基础概念、轮训请求实现和多个异步请求问题解决方案等内容，为你的开发中提供指导意义。
使用 async/await 函数可以让我们以同步代码的方式编写异步代码，代码结构更加清晰，容易理解。同时，本文提供的示例代码也可以直接使用，帮助你更好地理解和应用 async/await 函数。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6517c7b295b1f8cacdfeee89