当前栏目
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); // 我是测试数据 }
“js如何获取异步函数数据”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!
推荐- 怎么使用JS来实现Ajax分页
js如何获取异步函数数据
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营