Делать действия после того, как обещание разрешено в React

Question

в моем приложении для реагирования есть вызов API,

function apicall(input) {
    return fetch(url)
    .then(response =>
        response.json())
}

Это вызывается из другого файла

apicall(input).then(responseData => {
    //responseData is an array
    //some action->    responseData.map(
})

Я чувствовал, что этот подход неправильный, я просто хочу, чтобы apicall вернул данные. идея примерно такая: позвонить апикаль получить данные назначить ответ переменной зациклить ответ (вместо того, чтобы делать это внутри then)

Answer 1

при работе с Promise вы должны использовать синтаксис .then или async/await.

вы можете сделать что-то вроде этого

    async function apicall(input) {
        return fetch(url)
        .then(response =>
            response.json())
    }


    // in some other file

    (async function(){ // enclosing function must be async
      const data = await apicall(input)
    })

Answer 2

Если вы хотите загружать данные синхронно, тогда это лучший подход.в противном случае, если вы используете подход async/wait, ваш основной поток будет заблокирован, пока вы не получите ответ.Этот (async/wait) подход хорош, если вы хотите создавать страницы, отображаемые на сервере.для подхода async/wait следуйте ответу @Prithwee Das.

Answer 3

Вы подходите правильно, просто верните данные из правильного места, и вам просто нужно использовать async/await,

async function apicall(input) {
    await fetch(url)
    .then(response =>
        response.json()
    )
    .then(response => {
        console.log(response);
        return response;
    })
}

А твой apicall должен быть,

const returnData = apicall(input);
//do your operations on returnData here