如何等待来自异步/等待去抖动的axios调用的数据

时间:2020-06-20 20:29:36

标签: javascript async-await axios lodash

我正在尝试使用lodash的debounce函数从API请求中返回去抖动的搜索结果,但始终从调用中获取undefined

这是我的代码,请帮忙;

const searchSuggestionsRequest = async (input) => {
  const params = {
   userInput: encodeURIComponent(input),
  };
   const { data } = await axios.get(`${BASE_URL}/api/location`, { params });
  return data;
};

 const debouncedSuggestionsRequest = _.debounce(searchSuggestionsRequest, 500);

 const fetchSearchSuggestions = (input) => {

 return debouncedSuggestionsRequest(input);
};

handleSearchSuggestions = async (input) => {
  const searchObj = await fetchSearchSuggestions(input);
  console.log('searchObj', searchObj);

 };


handleSearchSuggestions()

1 个答案:

答案 0 :(得分:1)

您期望debounce函数返回原始函数的结果,或者返回已解决的诺言。但这不是去抖功能的工作原理。

debounce函数用您自己的代码包装您的函数,在其中检查是否有新的调用文件。一定时间后,最终将启动您的功能。但是它不能返回该函数的结果。

您需要定义一个更全局的作用域(或至少一个与您的函数重叠的作用域)变量,并在获取axios结果的函数中设置该变量。

问题仍然在于您无法等待结果,因此console.log仍将是未定义的。我个人是用Vue开发的,可以在变量上设置反应性观察器。