您现在的位置是:首页 > Javascript
当前栏目
js如何返回异步函数结果
2023-04-18 16:56:03 时间
假设您有这样一个问题:您正在进行一个异步调用,并且需要从原始函数返回该调用的结果。
像这样:
const mainFunction = () => {
const result = asynchronousFunction()
return result
}
但是,异步函数()在其中执行一些异步调用(例如fetch()调用),并且不能直接返回结果值。也许在内部,它需要等待一个承诺,或者一个回调。是这样的:
const asynchronousFunction = () => {
return fetch('./file.json').then(response => {
return response
})
}
该如何解决这个问题呢?
async/await是最直接的解决方案。你使用的是await关键字,而不是基于promise的方法,就像我们以前使用的:
const asynchronousFunction = async () => {
const response = await fetch('./file.json')
return response
}
在这种情况下,在mainFunction中,我们需要将async添加到函数签名中,并在调用asynousfunction()之前等待:
const mainFunction = async () => {
const result = await asynchronousFunction()
return result
}
现在返回一个promise,因为它是一个async函数:
mainFunction() //returns a Promise
所以为了得到结果,你可以使用IIFE这样调用:
(async () => {
console.log(await mainFunction())
})()
代码看起来像您从其他语言中使用的同步代码,但它是完全异步的。
另一种方法是使用回调。但是在使用async/await时,我们可以只修改异步函数()代码,在这种情况下,我们必须这样做
- 修改
asynchronousFunction()
代码 - 修改
mainFunction()
代码 - 修改调用代码
这是一个例子。异步函数()接收一个新函数作为参数,我们称之为回调。调用它传递响应对象:
const asynchronousFunction = callback => {
return fetch('./file.json').then(response => {
callback(response)
})
}
这个函数由mainFunction传递
const mainFunction = () => {
const callback = result => {
console.log(result)
}
asynchronousFunction(callback)
}
最后一个难题是调用mainFunction的函数。因为我们不能直接从mainFunction返回响应,因为我们是异步获取的,所以调用函数必须改变处理它的方式。
因此,代替使用const result = mainFunction(),我们可以这样:
const callbackFunction = result => {
console.log(result)
}
const mainFunction = callback => {
asynchronousFunction(callback)
}
//call the code
mainFunction(callbackFunction)
相关文章
- 前端面试 【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 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营