javascript - 基于参数的单例模式在 JavaScript 中创建 Promise

标签 javascript reactjs redux singleton es6-promise

我正在尝试使用单例模式来防止具有相同参数的重复网络请求。

我正在创建一个 Promise 来进行 API 调用

如果参数相同,则返回相同的 Promise,否则创建新的 Promise

我将参数本地存储在单例中以检测参数的变化

下面是我的代码

var getData = (()=>{
  var prev_param; //is this the correct way to store previous parameter locally
  var promise_instance;
  createInstance = (param)=>{
    prev_param = param;
    const temp_promise = this.props.dispatch(actions.getData(param)).then(getDataResult=>{
      this.setState({result: getDataResult});
    });
    return temp_promise;
  }

  return (param)=>{
    if (param && prev_param !== param) {
      promise_instance = createInstance(param);
    }
    return promise_instance;
  };
})();
getData("param1");
getData("param1");
getData("param2");
getData("param2");

像这样存储以前的参数是否正确

是否有更好的方法来实现这一目标?

最佳答案

这是一种非常标准的内存方法。我不确定您的需求,但我认为您可能想使用对象或映射来存储以前的调用(除非您只想存储最后一次调用)。所以类似

const getData = (()=>{
    let prevParams = {}; //is this the correct way to store previous parameter locally

    const createInstance = param => {
        prevParams[param] = this.props.dispatch(actions.getData(param)).then(getDataResult=>{
            this.setState({result: getDataResult});
        });
        return prevParams[param];
    }

    return param => {
        return param && prevParams[param] || createInstance(param);
    };
})();

getData("param1");
getData("param1");
getData("param2");
getData("param2");

这里的问题是 this.props 可能不会存在于上下文中,但我假设此代码已从调用它的上下文中取出。此外, this.setState 不会每次都被调用 - 仅在第一次使用该参数时才会被调用。具有相同参数的连续调用将被传递到已解析的 Promise 链。如果您希望每次调用该函数时都调用 setState,即使使用相同的参数,那么您可能需要移动 then 语句 - 请参阅下文

const getData = (()=>{
    let prevParams = {}; //is this the correct way to store previous parameter locally

    const createInstance = param => {
        prevParams[param] = this.props.dispatch(actions.getData(param));
        return prevParams[param];
    }

    return param => {
        return (param && prevParams[param] || createInstance(param))
            .then(getDataResult=>{
                this.setState({result: getDataResult});
            });
    };
})();

getData("param1");
getData("param1");
getData("param2");
getData("param2");

我对代码做了很多假设,如果有错误,很抱歉:)

关于javascript - 基于参数的单例模式在 JavaScript 中创建 Promise,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51212800/

相关文章:

javascript - 如何使用纯 JavaScript 读取文本文件的内容并将其写入 <div>?

javascript - 如何固定输入的位置,使其始终位于屏幕居中但其大小可以更改的元素下方?

javascript - React - 高阶组件应该写成一个函数吗?

javascript - 如何在 react 路由器的登录页面中隐藏导航栏

node.js - 端点未通过 Fetch API 调用进行身份验证(使用 passport-google-oauth2)

javascript - 当我更改地址栏中的路由时,React-Router 正在刷新页面

redux - 我应该为 angular8 应用程序使用哪个状态管理库?

javascript - 使用json上传导致缺少模板错误

javascript - 如何设置CKEditor自定义按钮的On Off状态

javascript - 后退按钮上的 jQuery 动画