Вы на правильном пути со своим мышлением, поскольку это делает дизайн вашего приложения более модульным.
Вы можете создать папку с именем apis/, ее не обязательно называтьно я просто даю вам пример.Затем внутри создайте файл с именем myjson.js, снова назовите его так, как считаете нужным.Внутри этой папки у вас будет что-то вроде этого:
import axios from "axios";
export default axios.create({
baseURL: "https://api.myjson.com"
});
Тогда вы можете реализовать это внутри вашего создателя действий как myJson.post()
Вы также можете сделать что-то вроде этого:
import React, { Component } from "react";
import axios from "axios";
const ROOT_URL =
"https://exampleurl.com";
class SignUpForm extends Component {
state = { phone: "" };
handleSubmit = () => {
axios
.post(`${ROOT_URL}/createUser`, {
phone: this.state.phone
})
.then(() => {
axios.post(`${ROOT_URL}/requestOneTimePassword`, {
phone: this.state.phone
});
});
};
Вышеприведенное, конечно, основано на аутентификации с использованием одноразового пароля, поэтому приспособьте ее к логике вашей архитектуры.
Кроме того, если вы собираетесь использовать функцию constructor с super(props) вам нужно передать props в нее, как я только что сделал.
Вы можете избежать всего этого, используя ES7 и просто назначая
state = {
first_name: '',
last_name: '',
user_name: '',
email: '',
password: '',
created_on: date,
isSignedup: false
}
Вы уже используете функцию стрелки в вашем handleSubmit, поэтому нет необходимости делать это: this.handleSubmit = this.handleSubmit.bind(this); Функция стрелки заботится о контексте this.
Мы можем пойти дальше и реорганизовать функцию handleSubmit, чтобы она выглядела чище, используя синтаксис ES7 async / await, например:
handleSubmit = async () => {
await axios.post(`${ROOT_URL}/createUser`, {
phone: this.state.phone
});
await axios.post(`${ROOT_URL}/requestOneTimePassword`, {
phone: this.state.phone
});
};
И для обработки ошибок, поскольку мы используем async / await, мы можем обернуть все ожидаемое с помощью блока try / catch следующим образом:
handleSubmit = async () => {
try {
await axios.post(`${ROOT_URL}/createUser`, {
phone: this.state.phone
});
await axios.post(`${ROOT_URL}/requestOneTimePassword`, {
phone: this.state.phone
});
} catch (err) {
console.log(err);
}
};
Таким образом, вы можете поймать и сохранить журналошибка.
И try / catch не является новым с ES2015 / 16/17, он существует уже некоторое время.
По сути, всякий раз, когда вы хотите обрабатывать ошибки, выданные запросом, управляемымоператор await, мы можем заключить его в оператор try / catch.
Ответ о неудачном сетевом запросе будет передан как объект ошибки, и мы сможем сохранить его в журнале, чтобы увидеть, что происходит.