假如现在需要通过发起请求来获取一份数据,页面上有两个按钮都可以点击用来获取数据,需要实现的效果是点击两个按钮都能拿到结果,但是只能发起一次请求。

正常情况下,两个按钮都会调用发送请求,想要只请求一次,解决方案就是将请求缓存起来。代码如下:

<button onclick="handleClick1()">测试1</button>
<button onclick="handleClick2()">测试2</button>
let p = null;

function click() {
    p = p || new Promise((resolve) => {
        console.log('啦啦啦,我执行啦');
        setTimeout(() => {
            resolve(20);
        }, 10);
    });
}

function handleClick1() {
    click();
    p.then(res => {
        console.log("1", res);
    })
}

function handleClick2() {
    click();
    p.then(res => {
        console.log("2", res);
    })
}