等待您的诺言

Question

我想在其他功能完成后执行一个功能。我使用过回调，但想使用Promise。但是我不确定该怎么做。

下面是代码，

this.set_function(this.save); //save is the callback method 

set_function = (callback) => {
    const some_var = {};
    this.props.get_method.then(response => {
        some_var.data = response;
        this.setState({selected: some_var});
        if(callback) {
            callback(this.props.id, some_var_data);
        }
    });
};

save = (id, some_var) => {
    const payload = {};
    payload.some_var = [some_var];

    client.update(id, payload)
        .then((request) => {
            this.save_data(id);
        });
};

在上面的代码中，一旦set_function完成，则应执行保存功能。如上所示，它可用于回调。我如何才能兑现承诺。有人可以帮我吗？

Answer 1

通过返回链接的诺言使它充满希望：

set_function = (callback) => {
 return this.props.get_method.then(response => {      
    this.setState({selected: some_var});
    return {id: this.props.id, some_var };
  });
};

然后链接另一个功能：

this.set_function.then(this.save)

最后解构通过的对象：

save = ({ id, some_var }) => {

Answer 2

唯一的窍门是您的回调需要两个独立的对象（this.props.id和some_var_data）。一个承诺只能有一个一个履行价值。因此，您可以将它们包装为一个对象：

set_function = () => this.props.get_method.then(response => {
    this.setState({selected: some_var});
    return {id: this.props.id, data: response};
});

请注意，由于您获得了this.props.get_method的承诺，因此我们将其束之高阁。

（您的some_var_data已经是一个对象，但是它仅具有data属性，因此我只在结果对象中直接包含了data。）

您将像这样使用它：

set_function()
.then(({id, data}) => {
    // use `id` and `data` here
})
.catch(error => {
    // Handle error here
});

（或者不包括.catch并将诺言链返回到其他可以处理错误的东西。）

或者，当然，如果您在async函数中使用了它：

const {id, data} = await set_function();

Answer 3

等待您的诺言

使用async ... await函数将返回一个诺言，该诺言将在函数完成后解决。

set_function = async () => {
    const some_var = {};
    const response = await this.props.get_method;

    some_var.data = response;
    this.setState({selected: some_var});
    return [this.props.id, some_var_data];
};

当您致电set_function时，它将返回一个承诺，因此您可以await或.then进行承诺。像这样：

this.set_function().then(this.save);
// where
save = ([ id, some_var ]) => {
    ...
}

Answer 4

在这种情况下，您将必须让set_function返回Promise。

set_function = () => {
    const some_var = {};
    this.props.get_method.then(response => {
        some_var.data = response;
        this.setState({selected: some_var});
        return Promise.resolve({id: this.props.id, some_var: some_var_data})
    });
};

现在您可以像这样使用它：

set_function().then(data => save(data)

这是您可以使用的jsfiddle。

https://jsfiddle.net/ctwLb3zf/

如何在React.js中使用Promise而不是回调？

4 个答案:

等待您的诺言