ReactJs Promise + Ajax返回值

Question

我有一个函数，使用jQuery调用API并获取结果。我的API端编程测试目的返回数字"19"。

export function clientAdd(data) {
    return (dispatch) => {
        return $.ajax({
            url: "http://api.example.com/client/add/",
            headers: {'AUTHORIZATION': `${sessionStorage.jwt}`},
            type: 'POST',
            cache: false,
            data: data,
            dataType: 'json',
            success: function (data) {
                let redirectUrl = '/client/' + data
                return redirectUrl';

            },
            error: function(xhr, status, err)  {

                if (xhr.status === 401) {
                    sessionStorage.removeItem('jwt');
                    return '/signin';

                }
                console.log('xhr',xhr.responseText);
                console.log('status',status);
                console.log('err',err);
                return dispatch({type: GET_CLIENT_FAIL, err});
            }
        })
    }

}

然后在我的组件中，点击提交按钮后，它将调用以下的onSave函数：

  onSave(event) {
    //event.preventDefault();
    this.props.actions.clientAdd(this.state.credentials).then((result) => {
        return this.setState({redirect: true, newCustomerId: result})

    }).catch((result) => {
        return this.setState({redirect: false, errorMessage: result})
    });
  }

结果应该是重定向网址或错误消息。

然而，我的API返回数字19。

我在网上阅读到，如果我想在组件中使用promise，我必须在$.ajax前面加上return，否则"then"将未定义。

- Someone Special

---

据我所知，$.ajax 不会返回 Promise。也许你应该使用一些能够返回 Promise 的东西？或者，你需要在 $.ajax 调用周围包装一个新的 Promise。 - Davin Tryon

我知道$.ajax不是一个Promise，但它会返回一个值。所以我想要的是我的onSave函数调用clientAdd函数，并在接收到返回值后继续进行下一次调用。 - Someone Special

它似乎返回一个jqXHR对象。success回调函数返回一个值，但显然不会从clientAdd返回。此外，您正在包装另一个函数：(dispatch) =>。您似乎混合了许多概念，也许只需遵循redux文档：https://redux.js.org/docs/advanced/AsyncActions.html - Davin Tryon

是的，我正在使用redux-thunk进行异步分发reducer，然后还需要promise返回到组件以继续下一个操作。对此非常陌生。 - Someone Special

Answer 1

你可以做的是创建自己的 promise 并将 ajax 调用放入其中。 然后调用 resolve 并传递你想要的数据，当 then 被调用时。

resolve(data_passed_to_then)

像这样:

return new Promise((resolve,reject) => {
    $.ajax({
            ...
            success: function (data) {
                let redirectUrl = '/client/' + data
                resolve(redirectUrl);
            },
            error: function(xhr, status, err)  {
                ...
                // return dispatch({type: GET_CLIENT_FAIL, err});
                reject(err);
            }
        })
})

- Vivek Doshi

---

运作如神奇。非常感谢。这是我第一次使用 Promise :)。 - Someone Special

@SomeoneSpecial，太棒了，愉快的编程 :) - Vivek Doshi