时间戳

首页 > 解决方案 > Redux Toolkit 查询和预取一些数据

javascript - Redux Toolkit 查询和预取一些数据

问题描述

我正在使用 Redux Toolkit Query 从 Audius 服务器获取数据。该服务基于许多 IPFS 节点，最佳实践是查询在特定时刻向其发送 API 请求的性能最佳的服务器。这是 Audius API 文档建议使用的功能，以便找到正确的服务器：

const sample = (arr) => arr[Math.floor(Math.random() * arr.length)]
  var host = await fetch('https://api.audius.co')
    .then(r => r.json())
    .then(j => j.data)
    .then(d => sample(d))

我需要从此函数中获取 url 并将其输入到我使用该createApi方法的函数中。
我将该函数包装在一个异步函数中，因为它使用了await，但我被困在了 Promise 中。 

async function getHost() {
  const sample = (arr) => arr[Math.floor(Math.random() * arr.length)]
  var host = await fetch('https://api.audius.co')
    .then(r => r.json())
    .then(j => j.data)
    .then(d => sample(d))
}

我不知道如何获得这个函数的结果，我知道如何使用 React 组件，使用useStateHook，但我不想在这里使用它，因为我认为它会减慢进程。
我试图了解如何使用它，createAsyncThunk但我无法理解它。
其余代码如下所示：

const contentProvider = `https://discoveryprovider2.audius.co`
const audiusVersion = `/v1`
const appName = `app_name=ZION`
const baseUrl = contentProvider + audiusVersion
const section = [`/users`, `/playlists`, `/tracks`]
const search = `/search?query=`

export const audiusApi = createApi({
  reducerPath: 'audiusApi',
  baseQuery: fetchBaseQuery({ baseUrl: `${baseUrl}` }),
  endpoints: (builder) => ({
    // SEARCH USERS
    // https://discovery-a.mainnet.audius.radar.tech/v1/users/search?query=Brownies&app_name=EXAMPLEAPP
    searchUsers: builder.query({
      query: (searchQuery) => `${section[0]}${search}${searchQuery}${appName}`
    }), 
.........})
  }),
})



export const {
  useSearchUsersQuery,
  useGetUserQuery,
  useGetUsersFavTracksQuery,
  useGetUsersRepostsQuery,
  useGetUserMostUsedTagsQuery,
  useGetUserTracksQuery,
  useSearchPlaylistQuery,
  useGetPlaylistQuery,
  useGetPlaylistTracksQuery,
  useSearchTracksQuery,
  useTrendingTracksQuery,
  useGetTrackQuery,
  useStreamTrackQuery
} = audiusApi

所以基本上我需要将async函数 = 的结果放置到contentProvider.
我试着简单地做

var response = getHost() // my async function

var contentProvider = response

但这并没有通过
希望有人可以帮助我解决这个问题=)。

标签： javascriptreactjsreduxredux-toolkit

解决方案

如果我理解你的话，我认为你会为如何使用异步函数而苦恼。

您可以轻松使用async await.

async function getHost() {
  const sample = (arr) => arr[Math.floor(Math.random() * arr.length)]
  var host = await fetch('https://api.audius.co');
  var json = await host.json();
  var data = await json.data;
  var d = await sample(data);
  
  return d;
}

你可以把它称为

var result = await getHost();
 
  result.
    then(d => console.log(d));

推荐阅读