Реакт: асинхронные функции

react-async.js

// Просто fetch, который асинхронно что-то сделал
handleOnSearch = () => {
    const text = 'time';
    const lang = 'en-ru';

    fetch(
        `https://reactmarathon-api.netlify.app/api/translate?text=${text}&lang=${lang}`,
        {
            headers: {
                'Authorization': 'dict.1.1.20200629T110424Z.820c51d0c3c6ce08.edfcf3c77862c014dce8158ae4581d8a842e9b30'
            }
        }
    )
        .then(res => res.json())
        .then(body => console.log('body ', body));
}

// Функция с fetch. Лежит в src/services/dictionary.js
const API_KEY = 'Здесь значение API';

const getTranslateWord = async (text, lang='en-ru') => {
    // В начале ожидаем ответ
    const res = await fetch(
        `https://reactmarathon-api.netlify.app/api/translate?text=${text}&lang=${lang}`,
        {
            headers: {
                'Authorization': API_KEY,
            }
        }
    );

    // После того, как ответ будет получен, будет выполняться код ниже
    const body = await res.json();

    return body;
}

export default getTranslateWord;


// Далее использую функцию getTranslateWord в App.js, например
import getTranslateWord from "./services/dictionary";

class App extends React.Component {
    state = {
        searchWord: '',
    }

    // Отслеживаю изменения в поле ввода поиска, чтобы искать именно то, что ввел пользователь
    handleChangeSearchInput = (e) => {
        this.setState({
            searchWord: e.target.value,
        });
    }

    // После запуска поиска в консоль выведется асинхронный ответ с переводом
    handleOnSearch = async () => {
        const getWord = await getTranslateWord(this.state.searchWord);
        console.log('getWord ', getWord);
    }

    render() {
        const {wordArr, value} = this.state;

        return (
            <>
                <Search
                    placeholder="input search text"
                    enterButton="Search"
                    size="large"
                    onSearch={this.handleOnSearch}
                    // onSearch={value => console.log(value)}
                    onChange={this.handleChangeSearchInput}
                />
            </>
        );
    }
}


// Дополнение к функции handleOnSearch. Я могу захотеть сделать прелоадер, пока данные с сервера не получены.
class App extends React.Component {
    state = {
        searchWord: '',
        searchWordInProcess: false,
    }

    getTheWord = async () => {
        const getWord = await getTranslateWord(this.state.searchWord);
        console.log('getWord ', getWord);

        this.setState({
            searchWordInProcess: false,
        })
    }

    handleOnSearch = async () => {
        // Вторым аргументом setState принимается колбек, который вызывается только после того, как state изменится
        this.setState({
            searchWordInProcess: true,
        }, this.getTheWord);
    }

    handleChangeSearchInput = (e) => {
        this.setState({
            searchWord: e.target.value,
        });
    }

    render() {
        const {searchWordInProcess} = this.state;

        return (
            <>
                <Search
                    placeholder="input search text"
                    enterButton="Search"
                    size="large"
                    onSearch={this.handleOnSearch}
                    // onSearch={value => console.log(value)}
                    onChange={this.handleChangeSearchInput}
                    loading={searchWordInProcess}
                />
            </>
        );
    }
}