javascript - 如何在 reactjs 中使用 promises 而不是回调？

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 完成，就应该执行保存功能。如上所示，它与回调一起使用。我怎样才能对 promise 做同样的事情。有人可以帮我解决这个问题吗？

Answer 1

唯一的技巧是您的回调需要两个独立的东西(this.props.id 和 some_var_data)。一个 promise 只能有一个履行值(value)——所以你把它们包装成一个对象:

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

请注意，由于您从 this.props.get_method 获得了 promise ，我们只是将其链接起来。

(你的some_var_data已经是一个对象了，但是它只有data属性，所以我直接把data包含在result对象中.)

你会像这样使用它:

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

(或者不包含 .catch 并将 promise 链返回给其他可以处理错误的东西。)

当然，如果您在 async 函数中使用它:

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