Javascript 如何更优雅地使用链接调用函数 这个代码起作用了，但我仍然清醒过来，想知道它是否可以写得更优雅/有任何逻辑上的缺陷我应该考虑。

我想做的是：

使用

useContext

调用函数-将图像源数据作为参数传入，操作格式，然后使用它进行API调用

API数据返回后，调用函数返回值数组

将这些值设置为填充DOM的状态

这是我的密码：

import React，{useContext，useState，useEffect，useCallback}来自“React”
从“../../App”导入{ImageSrcContext}
常量框=（）=>{
const{imageSrc}=useContext（imagesrcontext）
const[box，setbox]=useState（[]）
const fetchApiData=useCallback（异步（imgSrc）=>{
const ImageString=imgSrc.replace（'data:image/jpeg；base64'，''）
let response=wait fetch（“/image”{
方法：“post”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
ImageString，
}),
})
response=wait response.json（）
返回响应
}, [])
const getBoxStyles=useCallback(
异步（数据）=>{
常量框=data.outputs.regions
返回框。映射（（框）=>{
常数{
顶部
正确的，
底部，
左边
}=box.bounding\u box
返回{
top:`${top*100}%`，
右：`${100-右*100}%`，
底部：`${100-底部*100}%`，
左：`${left*100}%`，
}
})
},
[]
)
useffect（（）=>{
fetchApiData（imageSrc）
。然后（（res）=>{
返回getBoxStyles（res）
})
。然后（（res）=>{
返回设置框（res）
})
}，[fetchApiData、imageSrc、getBoxStyles]）
返回(
{box.map（（box，i）=>{
常量{top，right，bottom，left}=box
返回(
)
})}
)
}
导出默认框

一些注释：
我将函数移到了

useffect

之外，纯粹是因为这样感觉更干净，但我不确定是否有任何逻辑上的理由。
我正在使用

.then（）

在进行API调用后链接调用函数，但我想知道这是否是实现我试图实现的目标的好方法

---

非常感谢您的反馈，谢谢

您也可以使用

async

和

wait

来实现此目的，而不是使用链式

。然后

。请参见示例：

useEffect(() => {
    const call = async () => {
        const result = await fetchApiData(imageSrc)
        const styles = await getBoxStyles(result)
        
        setBoxes(styles)
    }

    call()
}, [fetchApiData, imageSrc, getBoxStyles])

---

您也可以使用

async

和

wait

来实现此目的，而不是使用链式

。然后

。请参见示例：

useEffect(() => {
    const call = async () => {
        const result = await fetchApiData(imageSrc)
        const styles = await getBoxStyles(result)
        
        setBoxes(styles)
    }

    call()
}, [fetchApiData, imageSrc, getBoxStyles])

---

酷！然而，第二种方法给了我这个错误：Effect回调是同步的，以防止竞争条件。放置异步函数inside@Selo刚刚删除了第二个选项，我的坏！谢谢你的评论。酷！然而，第二种方法给了我这个错误：Effect回调是同步的，以防止竞争条件。放置异步函数inside@Selo刚刚删除了第二个选项，我的坏！谢谢你的评论。