如何使用usewR获得不同API页面的响应？

发布于 2025-02-01 15:17:45 字数 521 浏览 2 评论 0原文

我正在使用具有不同数据的API URL取决于页面URL，但是我想在一个呼叫中获取所有页面URL，但没有获取任何数据，除非我只尝试获得一个页面。请有人可以帮我吗？

这是我的代码：

function arrayFetcher(urlArr) {
    const fetcher = (url) => axios.get(url).then((res) => res.json());
    return Promise.all(urlArr.map(fetcher));
}
    
let urlArray = [];
for(let i = 0; i < 20; i++) {
    urlArray.push(`https://api.google.com/page=250&page=${i}&sparkline=false`);
}

const { data } = useSWR(urlArray, arrayFetcher);
    
{data && console.log(data)}

原文

I am using an API URL that has different data depend on the page URL, but I want to get all the pages URLs in one call, but not getting any data, except when I try to get only one page. Please can someone please help me out?

Here is my code:

function arrayFetcher(urlArr) {
    const fetcher = (url) => axios.get(url).then((res) => res.json());
    return Promise.all(urlArr.map(fetcher));
}
    
let urlArray = [];
for(let i = 0; i < 20; i++) {
    urlArray.push(`https://api.google.com/page=250&page=${i}&sparkline=false`);
}

const { data } = useSWR(urlArray, arrayFetcher);
    
{data && console.log(data)}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绝不放开 2025-02-08 15:17:45

将数组作为键参数传递到使用时，数组中的每个项目将是arrayfetcher函数中的参数。这意味着，当您尝试访问urlarr内部arrayfetcher时，您只访问urlarray的第一个URL，而不是完整的URL数组本身。

一种可能的解决方案是传递对象作为的关键参数使用，其中包含urlarray。

const fetcher = (url) => {
    return axios.get(url).then((res) => res.json());
};

const arrayFetcher = ({ urlArray }) => {
    // Get `urlArray` from object param
    return Promise.all(urlArray.map(fetcher));
};

const Component = () => {
    let urlArray = [];
    for(let i = 0; i < 20; i++) {
        urlArray.push(`https://api.google.com/page=250&page=${i}&sparkline=false`);
    }

    // Pass `urlArray` inside object as the key
    const { data } = useSWR({ urlArray }, arrayFetcher); 
    console.log(data);

    // Rest of the component
};

When passing an array as the key parameter to useSWR, each item in the array will be its own argument in the arrayFetcher function. This means that when you're trying to access urlArr inside arrayFetcher you're only accessing the first URL of the urlArray, and not the full array itself.

A possible solution is to pass an object as the key parameter in useSWR, which contains urlArray.

const fetcher = (url) => {
    return axios.get(url).then((res) => res.json());
};

const arrayFetcher = ({ urlArray }) => {
    // Get `urlArray` from object param
    return Promise.all(urlArray.map(fetcher));
};

const Component = () => {
    let urlArray = [];
    for(let i = 0; i < 20; i++) {
        urlArray.push(`https://api.google.com/page=250&page=${i}&sparkline=false`);
    }

    // Pass `urlArray` inside object as the key
    const { data } = useSWR({ urlArray }, arrayFetcher); 
    console.log(data);

    // Rest of the component
};

回复收藏 0 原文

~没有更多了~