Javascript：在函数中混合异步与同步（缓存和 Ajax 请求）

Posted 2023-03-09

【中文标题】Javascript：在函数中混合异步与同步（缓存和 Ajax 请求）

【英文标题】：Javascript : mix Async with Sync in a function (cache and Ajax request)

【发布时间】：2020-07-21 03:53:05

【问题描述】：

我试图弄清楚如何从一个看起来像这样的函数混合 2 个不同的返回（异步/同步）：

getVideo(itemID)
  let data = localStorage.getItem(itemID)

  if ( data ) 
    return data;
   else
    axios.get('http://...')
  

如您所见，我正在使用 React 来处理我的请求，我的目标是从缓存中获取数据，而不是在线获取数据。现在我对我的函数有一个特殊性，我使用了 2 个嵌套的 axios.get('http://...')。

所以我的情况是：

- GET item online
-- GET SubItem online
-- OR get SubItem from cache if exists
---- Get SubSubItem online
---- Or get SubSubItem from cache if exists 
------ Update State 

我希望能够将我的 GET 调用放入一个函数中，但不确定如何做到这一点并同时处理不同的返回调用。

谁有想法？

【问题讨论】：

最后不要让通用函数处理不同的返回调用。

你的函数应该总是返回一个promise，即使它在缓存中同步找到了值——使用return Promise.resolve(data)

【参考方案1】：

是的，您可以使用嵌套函数来做到这一点。将您的主要功能转换为异步，您就可以开始了。请参阅下面的实现：

async function getVideo(itemID)
  let data = localStorage.getItem(itemID)

  if ( data ) 
    return data;
   else
    await axios.get('http://...', async r => // Async callback to use handle another async request
        console.log(`Axios response: $r`)
        // do another async stuff here in the same way
    )
  

【参考方案2】：

没有办法混合使用同步和异步，但您始终可以毫无问题地将同步转换为异步：

getVideo = async (itemID) => 
    let data = localStorage.getItem(itemID)

    if ( data ) 
        return data;
     else 
        return await axios.get('http://...')