Javascript 尝试读取react js中API返回的响应时未定义

在反应中。。。我试图读取API返回的响应，但未定义，问题是什么

从组件调用函数

retrieveItems（）

时发生未定义

**// item service class** 
import axios_o from 'axios';

class ItemService {
  retrieveItems() {
    axios_o.get("https://jsonplaceholder.typicode.com/posts")
      .then(response => {
        return  response;
      }).catch();
  }
}

**//调用项服务的组件**
从“React”导入React
从“./Services/ItemService”导入ItemService；
类发布扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount=（）=>{
this.itemservice=newitemservice（）；
**console.log（this.itemservice.retrieveItems（））**
}
render（）{
返回(
职位列表
);
}
}
导出默认职位；

---

正如我在评论中提到的，方法

retrieveItems

没有返回值。要修复此问题，请返回axios调用

retrieveItems（）{
返回axios_o.get（“https://jsonplaceholder.typicode.com/posts")
。然后（响应=>{
返回响应；
}).接住(
);
}

或者将其重写为async/Wait以获得更好的可读性

async retrieveItems() {
  try {
    return await axios_o.get("https://jsonplaceholder.typicode.com/posts")
  }catch(e) {
    // do some error handling or move the try/catch to caller side
  }
}

现在，在控制台日志中，您应该看到的不是API调用的真实响应，而是承诺。要获得真正的响应，您还必须等待呼叫方的回答：

class Posts extends React.Component {

    constructor(props) {
        super(props);

    }

    componentDidMount = () => {
        this.retrieveItems()
    }

    retrieveItems = async () => {
        this.itemservice=new ItemService();        
        const response = await this.itemservice.retrieveItems()
        console.log(response)
    }


    render() {
        return (
            <h1>Posts List</h1>
        );

    }
}

类发布扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount=（）=>{
this.retrieveItems（）
}
retrieveItems=async（）=>{
this.itemservice=newitemservice（）；
const response=wait this.itemservice.retrieveItems（）
console.log（响应）
}
render（）{
返回(
职位列表
);
}
}

---

这样，您应该可以在控制台日志中看到响应。

正如我在注释中提到的，方法

retrieveItems

没有返回值。要修复此问题，请返回axios调用

retrieveItems（）{
返回axios_o.get（“https://jsonplaceholder.typicode.com/posts")
。然后（响应=>{
返回响应；
}).接住(
);
}

或者将其重写为async/Wait以获得更好的可读性

async retrieveItems() {
  try {
    return await axios_o.get("https://jsonplaceholder.typicode.com/posts")
  }catch(e) {
    // do some error handling or move the try/catch to caller side
  }
}

现在，在控制台日志中，您应该看到的不是API调用的真实响应，而是承诺。要获得真正的响应，您还必须等待呼叫方的回答：

class Posts extends React.Component {

    constructor(props) {
        super(props);

    }

    componentDidMount = () => {
        this.retrieveItems()
    }

    retrieveItems = async () => {
        this.itemservice=new ItemService();        
        const response = await this.itemservice.retrieveItems()
        console.log(response)
    }


    render() {
        return (
            <h1>Posts List</h1>
        );

    }
}

类发布扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount=（）=>{
this.retrieveItems（）
}
retrieveItems=async（）=>{
this.itemservice=newitemservice（）；
const response=wait this.itemservice.retrieveItems（）
console.log（响应）
}
render（）{
返回(
职位列表
);
}
}

---

有了它，您应该可以在控制台日志中看到响应。

问题是希望将回调函数中的内容返回到外部函数的典型陷阱。这无法工作，因为外部函数（

retrieveItems

）已经完成。您需要保持异步模式。最简单的可能是：

从“axios”导入axios_o；
类项目服务{
检索项（）{
返回axios_o.get（“https://jsonplaceholder.typicode.com/posts");
}
}
从“React”导入React
从“./Services/ItemService”导入ItemService；
类发布扩展了React.Component{
componentDidMount=（）=>{
this.itemservice=新的itemservice（）；
this.itemservice.retrieveItems（）。然后（（res）=>{
控制台日志（res）；
});        
}
render（）{
返回（职位列表）；
}
}
导出默认职位；

问题在于，想要从回调函数内部返回某些内容到外部函数，这是一个典型的陷阱。这无法工作，因为外部函数（

retrieveItems

）已经完成。您需要保持异步模式。最简单的可能是：

从“axios”导入axios_o；
类项目服务{
检索项（）{
返回axios_o.get（“https://jsonplaceholder.typicode.com/posts");
}
}
从“React”导入React
从“./Services/ItemService”导入ItemService；
类发布扩展了React.Component{
componentDidMount=（）=>{
this.itemservice=新的itemservice（）；
this.itemservice.retrieveItems（）。然后（（res）=>{
控制台日志（res）；
});        
}
render（）{
返回（职位列表）；
}
}
导出默认职位；

retrieveItem

不返回axios结果。请记住，它是一个

承诺

，因此它是异步工作的

retrieveItem

不会返回axios结果。请记住，这是一个

承诺

因此它是异步工作的。添加的返回不会使它更同步，对吗？谢谢aviya的回答，我有一个问题。我们是否可以说，在调用包含API调用的函数时必须使用“then”？@DeVYaGhI由于ajax调用，

then

部分是必需的。我想不出有哪种API调用不是ajax，因为这会让应用程序总是等待服务器响应。因此可能需要使用@aviya.developer非常感谢我的问题解决了添加的返回不会使这变得更加同步，是吗？谢谢aviya的回答，我有一个问题。我们是否可以说，在调用包含API调用的函数时必须使用“then”？@DeVYaGhI由于ajax调用，

then

部分是必需的。我想不出有哪种API调用不是ajax，因为这会让应用程序总是等待服务器响应。因此，可能需要使用。@aviya.developer非常感谢我的问题解决了

class Posts extends React.Component {

    constructor(props) {
        super(props);

    }

    componentDidMount = () => {
        this.retrieveItems()
    }

    retrieveItems = async () => {
        this.itemservice=new ItemService();        
        const response = await this.itemservice.retrieveItems()
        console.log(response)
    }


    render() {
        return (
            <h1>Posts List</h1>
        );

    }
}