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

时间:2018-07-06 14:40:26

标签: javascript reactjs redux singleton es6-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");

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

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

1 个答案:

答案 0 :(得分:2)

这是用于记忆的相当标准的方法。我不确定您的需求,但我认为,您可能想使用一个对象或映射来存储以前的呼叫(除非您只想存储最后一个呼叫)。所以像

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不会每次都被调用-仅在第一次使用该参数时被调用。具有相同参数的连续调用将传递到已解析的承诺链。如果希望每次调用该函数时都调用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");

我对代码做了很多假设,如果有误,请见谅:)