js如何获取异步函数的数据

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

异步函数

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

常见的异步函数一共有四类:

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

1. 回调函数

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

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

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

promise

promise函数是一种特殊的异步函数,里面包含三种状态:pending、fulfilled(resolved)、rejected。pending是promise的初始状态,resolved表示执行完成且成功的状态,rejected表示执行完成且失败的状态。三个状态不可逆转

Promise本身是同步,then的内容是异步:

let promiseFunc = new Promise((resolve, reject) => {// 执行同步代码resolve();
}).then((res) => {console.log(res)
},(err) => {console.log(err);
}) 

Generator函数

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

function *myTest() {yield 'I',yield 'am',yield 'queen'
} 

async/await函数

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

async function myTest() {let val = await new Promise((resolve) => {resolve(1)});
} 

如何获取异步函数的数据

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

回调函数

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

function getData(cb) {let val = 'a';cb(val);
}

getData((data) => {console.log(data); // 'a'
}) 

promise

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

let promiseFunc = new Promise((resolve, reject) => {let n = Math.random();if (n >= 0.7) {resolve(n);} else {reject(`${n}小于0.7`)}
});
promiseFunc.then((data) => {console.log(data); // 0.3小于0.7
}) 

async await

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

async function myTest() {return '我是测试数据'
};
async function getData() {let val = await myTest();console.log(val); // 我是测试数据
} 

最后

整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值