ReactJs Promise + Ajax 返回值答案

【问题标题】：ReactJs Promise + Ajax Return ValueReactJs Promise + Ajax 返回值
【发布时间】：2017-11-09 18:06:36
【问题描述】：

我有一个使用 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})
    });
  }

result 应该是 redirectUrl 或 ErrorMessage。

但是，我不断收到我的 API 返回的数字 19。

如果我想在我的组件中使用promise，我在线阅读，我必须在$.ajax前面添加return，如果不是“则”将是未定义的。

【问题讨论】：

AFAIK，$.ajax 不返回承诺。也许您应该使用可以做到的东西？或者，您必须在 $.ajax 调用周围包装一个新的 Promise。
我知道 $.ajax 不是一个承诺，但它返回一个值。所以我想要的是我的 onSave 函数来调用 clientAdd 函数，并在收到返回值后，继续进行下一次调用。
它似乎返回了一个jqXHR 对象。 success 回调返回一个值，但显然不会从clientAdd 返回。此外，您正在包装另一个函数：(dispatch) => 。您似乎混合了许多概念，也许只需遵循 redux 文档：redux.js.org/docs/advanced/AsyncActions.html
是的，我正在使用 redux-thunk 到异步调度减速器，然后还需要承诺返回组件以继续下一步操作。对此非常陌生。

标签： javascript reactjs promise

【解决方案1】：

您可以做的是，创建自己的promise 并将ajax 调用放入其中

然后调用 resolve 并在调用时传递您想要的数据

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);
            }
        })
})

【讨论】：

就像一个奇迹。非常感谢。我第一次使用 Promise :)。
@SomeoneSpecial，伟大的，快乐的编码:)