Преобразовать обещание Ax ios в обычный массив JSON - PullRequest
Новая
       23

Преобразовать обещание Ax ios в обычный массив JSON

0 голосов
/ 03 апреля 2020

Я пытаюсь вернуть данные из функции, но это вызывает у меня проблемы.

Мне нужна эта функция, чтобы вернуть JSON, но она возвращает обещание.

Вот функция: 

import axios from 'axios';

const fetchData = async () => {
  const result = await axios(
    'https://localhost:44376/api/parts',
  );
  return JSON.stringify(result, null, 2);
};

export default fetchData;

Выдает эту ошибку, когда я пытаюсь использовать возвращенные данные:

Uncaught TypeError: data.map не является функцией

Когда я пишу на консоль, вот что я вижу: 

data from machineParts API call:

Promise {<pending>}
 [[PromiseStatus]]: "resolved"
    [[PromiseValue]]: {"data": [ { "id": 5, "title": "Steel Rods", "partId": 39482  etc...

Но вот что мне нужно, чтобы это вернуть: 

data from machineParts API call: (7) [ {...}, {...}, {...}, {...}, {...}, {...}, {...}]

0:
   id: 5
   title: "Steel Rods"
   partId: 39482

1:
   id: 23
   title: "Honed Cylinder head"
   partId: 23412

et c. ..

Есть ли способ преобразовать обещание в массив JSON?

Спасибо!

Ответы [ 3 ]

2 голосов
/ 03 апреля 2020

Вы просто хотите вызвать .then() после вызова функции fetchData: 

// fetchData.js
import axios from "axios";

const fetchData = async () => {
  const result = await axios(
    'https://localhost:44376/api/parts',
  );
  // return the result
  return result;
};

export default fetchData;

Теперь импортируйте ее в свой компонент следующим образом: 

// App.js 
import fetchData from './fetchData' // fetchData path

const App = () => {
  const [data, setData] = React.useState([])

  React.useEffect(() => {

   fetchData().then(res => {
     setData(res.data)
   })
  },[])

  return (
    <div>
      <pre>
        <code> {JSON.stringify(data, null, 2)}
)} export default Приложение

См. песочница пример.

1 голос
/ 03 апреля 2020

async и await - это просто другой синтаксис для обработки обещаний, «ожидание» более или менее работает так же, как при цепочке .then при вызове axios. Примерно так должно работать в модуле: 

const fetchData = async () => {
  const response = await axios.get('https://localhost:44376/api/parts');
  return response.data;
};

Поскольку fetchData() - это функция async, она вернет Promise, поэтому вызывающему коду будет либо await результат или используйте синтаксис .then для доступа к полученным данным.

1 голос
/ 03 апреля 2020

Ответ находится в общей консоли, строка начинается с data from machineParts API call:. Массив вложен в data проп.

Вы также JSON.stringify получите результат, который сделает его строкой, а не строкой или объектом. Вот почему вы видите ошибку data.map is not a function, поскольку string не имеет метода-прототипа с именем map.

. Чтобы исправить, измените return JSON.stringify(result, null, 2); на return result.data;.

...