Блог

Главная - Вопросы по программированию - Как отобразить результат в обещании, полученном в результате вызова функции

Как отобразить результат в обещании, полученном в результате вызова функции

#javascript #arrays #object #foreach #mapping

Вопрос:

У меня есть эта функция, которая возвращает результат из GET в API (я использую API AWS Rest для контекстуализации).:

 const listUsers = async () => {
  const apiName = 'AdminQueries'
  const path = '/listUsers'
  const params = {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `${(await Auth.currentSession())
        .getAccessToken()
        .getJwtToken()}`,
    },
  }
  return await API.get(apiName, path, params)
}

И если я вызову функцию для печати на консоли, например:

console.log(listUsers())

Я получаю массив на своей консоли:

 Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object
Users: Array(42)
0: {Username: "00e534e3-08ee-4bc1-9d19-ab18208e3f94", Attributes: Array(5), UserCreateDate: "2021-09-06T10:05:35.537Z", UserLastModifiedDate: "2021-09-06T10:05:35.537Z", Enabled: true, …}
1: {Username: "05f4ce2e-4b57-48d5-9f5f-e18d250aefb4", Attributes: Array(6), UserCreateDate: "2021-09-10T19:45:32.002Z", UserLastModifiedDate: "2021-09-10T19:54:37.333Z", Enabled: true, …}
2: {Username: "06a78cc7-af6a-4fb6-975d-458c089b69a5", Attributes: Array(6), UserCreateDate: "2021-09-10T18:04:27.780Z", UserLastModifiedDate: "2021-09-10T18:04:27.780Z", Enabled: true, …}
3: {Username: "32652d77-e7a4-444a-9995-f8f50eb14633", Attributes: Array(6), UserCreateDate: "2021-09-06T15:48:24.897Z", UserLastModifiedDate: "2021-09-06T15:49:39.476Z", Enabled: true, …}
length: 42
__proto__: Array(0)
__proto__: Object

Как отобразить этих пользователей в массиве? Я пытался, но не смог.

Комментарии:

1. Это асинхронная функция, использующая console.log(await listUsers())

2. Удалите async и await в вашей listUsers функции; вам это там не нужно. Теперь запустите const users = await listUsers(); и console.log(users) из какой-нибудь асинхронной функции. (чтобы было ясно: нет возможности вернуться к коду синхронизации; как только вы используете асинхронный код, вы остаетесь асинхронным при выполнении вызовов функций) также смотрите здесь: jsfiddle.net/khrismuc/kpj204wL

3. @ChrisG если я удалю асинхронное ожидание в теле функции, оно нарушит его, потому .getAccessToken() что это зависит от него. Также я не понимаю, как это решает мою проблему. Я все еще не могу нанести его на карту…

4. @AnkushVerma если я это сделаю, я получу Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)

5. Верно, я пропустил 2-е ожидание. В любом случае, если вы вызовете listUsers() в контексте синхронизации, вы всегда получите обещание, а не массив пользователей. Вам нужно await listUsers() , чтобы получить массив. Вы можете использовать await его на верхнем уровне, но вам нужно включить его или обновить узел. Ты смотрел на мою скрипку…? Это должно все прояснить.

Ответ №1:

Ваша функция ListUsers возвращает обещание. Чтобы получить ответ, вы можете использовать что-то вроде этого

 const listUsers = async () => {
  const apiName = 'AdminQueries'
  const path = '/listUsers'
  const params = {
    headers: {
      'Content-Type': 'application/json',
      Authorization: `${(await Auth.currentSession())
        .getAccessToken()
        .getJwtToken()}`,
    },
  }
  return await API.get(apiName, path, params)
}

**** update ****
const func = async () => {
   const response = await listUsers();
   console.log(response);
}

func();

Комментарии:

1. Да! Таким образом, я получаю массив на консоли. Но я не могу сделать func().map или func.map. Так как же мне его нанести на карту?

2. В этом случае вы можете просто вернуть свой массив вместо возврата обещания из listUsers функции.

3. но какой массив, чувак? я не понимаю… если я вызову функцию func(), на консоли появится следующее сообщение: i.imgur.com/TB9O6tK.png Если я не вызову функцию func(), она не появится. Но как я могу показать ЭТОТ массив в своем компоненте react? Я не понимаю, понимаешь?

4. поскольку вы хотели использовать карту, я предположил, что api отвечает массивом. если это правильно, вы можете установить состояние внутри ListUsers(),

Ответ №2:

 const listUsers = async () => {
      const apiName = 'AdminQueries'
      const path = '/listUsers'
      const params = {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `${(await Auth.currentSession())
            .getAccessToken()
            .getJwtToken()}`,
        },
      }
      return await API.get(apiName, path, params)
    }

    const func = async () => {
      const response = await listUsers();
      reponse.data?.map((item) => {
        console.log(item);
      })
    }

Комментарии:

1. TypeError: response.map is not a function

Метки: ,