这篇文章主要讲解了“js通过四类异步函数获取数据”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

目录

• 异步函数
• 1. 回调函数
• promise
• Generator函数
• async/await函数
• 回调函数
• promise
• async await

异步函数是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);   // 我是测试数据
}

“js通过四类异步函数获取数据”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用JS如何制作列表循环播放的效果

  这篇文章主要为大家详细介绍了js实现列表自动滚动循环播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用vue怎样实现压缩图片再上传的功能？

  这篇文章给大家分享的是用vue怎样实现压缩图片再上传的功能。小编觉得挺实用的，很多场景都可以应用，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

• Vue中如何通过XMLHttpRequest调整svg的属性

  这篇文章主要为大家介绍了Vue.js中动态更改svg的相关属性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• vue指令是什么意思？用法是什么？

  这篇文章主要分享vue指令的内容，很多新手可能对vue指令不太了解，下文就给大家介绍一些常用vue指令、自定义指令、全局指令、局部指令等等，感兴趣的朋友可以参考下，希望大家阅读完这篇文章能有所收获

• CocosCreator消息分发是什么样的，如何理解

  这篇文章主要介绍了详解CocosCreator消息分发机制，详细介绍了各模块的设计，同学们一定要自己看下