js如何获取异步函数数据

前端开发   发布日期:2023年07月05日   浏览次数:550

本篇内容介绍了“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. getData((data) => {
  6. console.log(data); // 'a'
  7. })

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如何获取异步函数数据的资料请关注九品源码其它相关文章!