将 Axios 承诺转换为常规 JSON 数组

Posted 2023-02-22

【中文标题】将 Axios 承诺转换为常规 JSON 数组

【英文标题】：Convert an Axios promise to a regular JSON array

【发布时间】：2020-07-15 19:47:13

【问题描述】：

我正在尝试从函数返回数据，但它给我带来了问题。

我需要这个函数来返回 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;

当我尝试使用返回的数据时，它会抛出这个错误：

未捕获的类型错误：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      

等等……

有没有办法将 Promise 转换为 JSON 数组？

谢谢！

【问题讨论】：

这能回答你的问题吗？ Get response from axios with await/async

response.data 已经有你想要的数据，一个数组或一个对象，具体取决于服务器响应。

【参考方案1】：

你只想在调用fetchData函数后调用.then()：

// 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) </code>
      </pre>
    </div>
  )


export default App

参见sandbox 示例。

【讨论】：

谢谢，我当前的 App.js 设置为使用如下数据： const [data, setData] = React.useState(() => fetchData())

@SkyeBoniwell 您最好先将 usestate 设置为空数组useState([ ])，然后稍后使用useEffect 更新它，以防您的数据尚未准备好，或者发生某些服务器故障。请参阅答案中的沙盒示例。

好的，谢谢，我看到你的沙盒工作了。当我使用它时，我得到“未定义”。所以我放了一个 'console.log('function: ', result.data);'就在'return'语句之前，在函数内部，它返回我正在寻找的所有数据。我放了一个 'console.log("App.js:", data);'它只返回“未定义”。

你在fetchData()之后有没有给.then()打电话？请注意，fetchData 函数返回一个promise，您仍然需要解决。

@SkyeBoniwell 你能用你的代码做一个沙箱吗？您可以使用一些虚拟 API，例如 reqres 或 jsonplaceholder

【参考方案2】：

async 和await 只是处理承诺的不同语法，'await' 或多或少与在调用axios 时链接.then 相同。这样的东西应该在模块中起作用：

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

因为fetchData() 是一个async 函数，它会返回一个Promise，所以调用代码要么必须await 结果，要么使用.then 语法来访问结果数据。

【讨论】：

但我使用的是 async 和 await

我编辑了我的答案以使用 async/await。祝你好运解决这个问题。

我需要使用 .then 来摆脱返回的承诺吗？

您可以在调用 fetchData 的代码中使用 .then，或者您可以等待对 fetchData 的调用。两者都可以工作。

【参考方案3】：

答案在您共享的控制台中，以data from machineParts API call: 开头的行。该数组嵌套在 data 属性下。

您还 JSON.stringifying 结果，这将使它成为一个字符串，而不再是一个字符串或对象。这就是您看到data.map is not a function 错误的原因，因为string 没有名为map 的原型方法。

要修复，请将return JSON.stringify(result, null, 2); 更改为return result.data;。

【讨论】：

我试过了，仍然看到所有承诺的东西，我仍然得到同样的错误