js获取异步函数数据的实现

平安中华日

1. 异步函数是js中经常会用到的，它的作用无非就是进行一些异步的操作（处理数据）。那么，常见的异步函数有哪些呢，我们一般又是如何获取异步函数的数据呢？今天这篇文章就是围绕这个问题去写的。

复制代码

异步函数

一般正常情况下，js中的函数是一个一个地按照顺序来完成的。但是异步函数可以改变执行顺序。不过异步任务必须在同步任务执行结束之后，从任务队列中依次取出执行。
常见的异步函数一共有四类：

• 回调函数
  
• promise函数
  
• Generator函数
  
• async/await函数
  

1. 回调函数

回调函数一般是作为某个函数的入参，然后在函数内部执行这个回调函数。常见的回调函数有ajax，setTimeouut定时器类，dom事件回调等。

1. testA(cb) {
   
2. cb();
   
3. }
   
4. setTimeout(() => {
   
5. console.log('这是一个回调函数')
   
6. }, 100)

复制代码

缺点： 不能try catch捕获错误, 不能直接return。


promise

promise函数是一种特殊的异步函数，里面包含三种状态：pending、fulfilled(resolved)、rejected。pending是promise的初始状态，resolved表示执行完成且成功的状态，rejected表示执行完成且失败的状态。三个状态不可逆转。
Promise本身是同步，then的内容是异步：

1. let promiseFunc = new Promise((resolve, reject) => {
   
2.   // 执行同步代码
   
3.   resolve();
   
4. }).then((res) => {
   
5.   console.log(res)
   
6. },(err) => {
   
7.   console.log(err);
   
8. })

复制代码

Generator函数

Generator 是一个可以暂停执行（分段执行）的函数，函数名前面要加星号，是一个状态机，封装了多个内部状态。

1. function *myTest() {
   
2.   yield 'I',
   
3.   yield 'am',
   
4.   yield 'queen'
   
5. }

复制代码

async/await函数

async修饰符加在函数前面，返回一个promise，可以使用then添加回调函数。 await后跟着一个promise或者一个原始类型的值（会自动转成立即 resolved 的 Promise 对象），等待resolve的结果。任何一个await后的Promise发生reject，整个aysnc都会中断，需要try{}catch(err){}来捕获错误。

1. async function myTest() {
   
2.   let val = await new Promise((resolve) => {
   
3.     resolve(1)
   
4.   });
   
5. }

复制代码

如何获取异步函数的数据

获取异步函数的数据一般分为三种：回调函数，promise和async和await

回调函数

回调函数的这种很简单，就是直接将数据传进回调函数里作为入参即可。

1. function getData(cb) {
   
2.   let val = 'a';
   
3.   cb(val);
   
4. }
   
5. 
   
6. getData((data) => {
   
7.   console.log(data);   // 'a'
   
8. })

复制代码

promise

使用promise来处理异步，主要就是利用resolve成功的回调函数，reject失败的回调函数。

1. let promiseFunc = new Promise((resolve, reject) => {
   
2.   let n = Math.random();
   
3.   if (n >= 0.7) {
   
4.     resolve(n);
   
5.   } else {
   
6.     reject(`${n}小于0.7`)
   
7.   }
   
8. });
   
9. promiseFunc.then((data) => {
   
10.   console.log(data);   // 0.3小于0.7
    
11. })

复制代码

async await

async: 把函数变成异步函数。wait是等待异步函数执行完成。其中await一定要写在async里面

1. async function myTest() {
   
2.   return '我是测试数据'
   
3. };
   
4. async function getData() {
   
5.   let val = await myTest();
   
6.   console.log(val);   // 我是测试数据
   
7. }

复制代码

到此这篇关于js获取异步函数数据的实现的文章就介绍到这了,更多相关js获取异步函数 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/276299.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！