js重复请求只调用一次

香辣鱼干

已于 2024-09-10 14:33:40 修改

阅读量165

点赞数 3

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2024-09-10 14:32:00 首次发布

本文链接：https://blog.csdn.net/qiaolezi787/article/details/142098003

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

借鉴b站远方os，up博主的方法

js重复请求只调用一次,多次调用只返回第一次调用的结果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
</body>

<script>
    let _fecth = async (params) => {
        let query = new URLSearchParams(params).toString()
        let res = await fetch(`https://api.github.com/users/octocat?${query}`, { headers: { 'Content-Type': 'application/json' } })
        return res.json()
    }

    function requestFilter(cb) {
        let reqTask = {}
        return (...args) => reqTask[JSON.stringify(args)] ??= new Promise(async (resolve, reject) => cb(...args)
            .then(resolve, reject)
            .finally(() => delete reqTask[JSON.stringify(args)]))
    }

    const asyncOnce = requestFilter(_fecth)

    asyncOnce({ obj: 'name1' }).then((res) => {
        console.log('请求1', res);
    })
    asyncOnce({ obj: 'name1' }).then((res) => {
        console.log('请求2', res);
    })
    asyncOnce({ obj: 'name1' }).then((res) => {
        console.log('请求3', res);
    })
</script>
</script>

</html>