Конвертировать из Ajax в Axios

Question

Я создал веб-сайт, который был создан с использованием JQuery, но сейчас я пытаюсь научиться реагировать, но не уверен, как бы я использовал axios для соединения с моим внутренним API.Кто-нибудь знает эквивалент этого к axios.

    $("#log-form").submit(function (event) {
        event.preventDefault();
        $.ajax({
            type: 'POST',
            url: '/users/login',
            dataType: 'json',
            data: {
                'user_name': event.target.inputUsername.value,
                'password': event.target.inputPassword.value
            },
            success: function(token){
                 $(location).attr('href', '/feed' ); // Redirect to logged in page
            },
            error: function(errMsg) {
                swal(
                    'Oops...',
                    errMsg.responseJSON.body,
                    'error'
                )
            }
        });
    });

Answer 1

Как правило, вам нужно настроить Реагирующую контролируемую форму .

Axios использует обещаний , поэтому вы можете использовать async/await внутриtry/catch блокируйте или используйте более традиционные .then/.catch.

Примечание : всегда catch ваши обещания.Распространенная ошибка среди начинающих разработчиков заключается в том, что сервер никогда не выдаст ошибку.В результате может произойти сбой всего приложения.

После настройки контролируемой формы вы создадите собственный обратный вызов метода класса handleSubmit с помощью вызова API:

constructor() {
  super();

  this.state = { 
    error: "", 
    password: "",
    username: ""
  }

  this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(e) {
  e.preventDefault(); // in this case, e.preventDefault() prevents the page from refreshing
  const { username, password } = this.state; // grabs current input values from React state

  axios.post('/users/login', { user_name: username, password: password }) // sends a POST request to "/users/login" with data
  .then(token => { // if the POST request was successful...
     // do whatever you need to do with the token (set it to localStorage or Redux state)
     this.props.history.push("/feed");  // then you'll redirect -- this assumes you're at the parent component AND using react-router-dom
   })
  .catch(err => this.setState({ error: err.toString() })); // if there's an error, you'll set it to state and display it in the render method below  
}

render() {
  return (
    <div>
      <form onSubmit={this.handleSubmit}>
      ...etc
      <form>
      {this.state.error && 
         <p>
           This was a problem logging in: {this.state.err}
         </p>
      }
    </div>
  )
}

Answer 2

Изменить на аксиос ..

       axios.post ('users/login', { 
        User_name: event.taget.whatever,
        Password: event.taget.whatever
        })
      .then (response => {
         //whatever you want to do with data you recieved
        };