导入时获取 returns 未定义

Question

我有一个从 url 获取数据的函数，应该 return 它：

const fetchTableData = () => {
fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        return data;
    })
}

export default fetchTableData;

问题是当我导入这个函数并尝试使用它时，它总是 returns undefined。

当我用控制台记录函数内部的数据时，您可以看到它可用。当我尝试导入它时，该功能不起作用。

这里有什么问题？为什么会这样？

Answer 1

试试这个 =) 您还必须 return 来自 fetchTableData 函数的东西。

const fetchTableData = () => {
  const fetchedData = fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        return data;
    })

    return fetchedData;
}

export default fetchTableData;

或者您可以 return 像这样：

const fetchTableData = () => {
      return fetch('https://api.myjson.com/bins/15psn9')
        .then(result => result.json())
        .then(data => {
            return data;
        })
    }

    export default fetchTableData;

Answer 2

您需要将数据存储在全局变量中或分配任何变量以获取 return 数据。

//First way
fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        console.log("data",data);
    });
    
//Second way
let binData = null;

fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        binData = data;
        console.log("binData", binData);
    });

这是工作示例。

Answer 3

在您的代码中，您没有从 return 函数中调用 fetchTableData。仅来自第二个 then() 回调。当函数没有 return 值时，undefined 将被 returned。

试试这个：

const fetchTableData = () => {
const myResponse = fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
        return data;
    })
return myResponse;
}

export default fetchTableData;

现在发生的情况如下：

第二个 then() 函数的响应 return 是 returning 数据。
我们将此数据保存在一个名为 myResponse 的变量中。
我们现在 return 从函数 fetchTableData 中获取这个值。

导入时获取 returns 未定义

Fetch returns undefined when imported

javascript

ecmascript-6

reactjs

fetch-api