Javascript获取数据并在变量上解析它们[重复]答案

【问题标题】：Javascript fetching data and parse them on a Variable [duplicate]Javascript获取数据并在变量上解析它们[重复]
【发布时间】：2021-11-06 00:10:46
【问题描述】：

我一直在为我的问题寻找解决方案，它看起来实际上很简单，但它不起作用:(。问题如下：我从我的后端获取数据 localhost/users。我得到了数据，我可以 console.log 它们。但我似乎不可能将它写在变量上并导出它。这是我的代码：

import axios from "axios";


function init() {
    let obj;
    axios('/users')
    .then(response => {
        obj = (response.data)
        console.log(obj)
        return obj
    })
    .catch(error => {
        console.log("error fetching")
        return null
    })
    
}

let obj = init()


export default obj

如果我尝试 console.log 它只是写未定义的导出变量，我猜它会跳过响应部分。返回的变量也未定义

【问题讨论】：

标签： javascript reactjs react-native axios fetch

【解决方案1】：

你不能从内部函数返回值。

为此，您可以使用 Promises 或 Callback 或简单地 React setState，如果您想将它放在组件内部。

使用承诺：

import axios from "axios";


function init() {
    return new Promise((resolve, reject) => {
     axios('/users')
      .then(response => {
        obj = (response.data)
        resolve(obj);
      })
      .catch(error => {
        reject(error);
      })
   });
}

// To log or get the values 
init().then(obj => {
  console.log(obj);
}).catch(error => console.log(error));


export default obj

使用回调

import axios from "axios";


function init(successCallback, errorCallback) {
     axios('/users')
      .then(response => {
        obj = (response.data)
        successCallback(obj);
      })
      .catch(error => {
        errorCallback(error);
      })
}

// To log or get the values 
init(obj => {
  console.log(obj);
}, error => {
  console.log(error);
});


export default obj

【讨论】：

【解决方案2】：

你只需要在axios函数前加上return关键字

import axios from "axios";


function init() {
 let obj;
 return axios('/users')
 .then(response => {
     obj = (response.data)
     console.log(obj)
     return obj
 })
 .catch(error => {
     console.log("error fetching")
     return null
 })
 
}

let obj = init()


export default obj
 ```

【讨论】：