ReactJs Promise + Ajax戻り値

Question

jqueryを使用してAPIを呼び出し、結果を取得する関数があります。 APIの終了は、テストのためだけに番号「19」を返すようにプログラムされています。 結果がredirectUrlまたはにErrorMessageことになっている

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

を次のように私のコンポーネントで次に

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関数を呼び出します。

しかし、APIで返される番号19は引き続き取得しています。

コンポーネントでpromiseを使用したい場合は、$ .ajaxのreturn infrontを追加する必要があります。「then」は定義されません。あなたは何ができるか

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