Question

这是我在js中的代码，我尝试使用这些代码尝试从api请求某事，然后返回结果或错误，但是在另一个文件中，当我尝试记录此消息时，我得到了“未定义”值。我在这里想念什么？

import {baseAPI} from "../core/globals";
import axios from "axios/index";

export const getUserPosts = () => {
    return(
        axios({
            method : 'get',
            url: baseAPI+'post',
            headers:{
                Authorization : localStorage.getItem('token')
            }}
        ).then((result) => {
            return result.data
        }).catch((error) => {
            return error;
        })
    );
}

另一个文件看起来像这样

import { getUserPosts } from '../actions/userProfile';
import {baseAPI} from "../core/globals";

export default class Profile extends React.Component{

    state = {
        postResult : {}
    };
    componentDidMount(){
        let temp = getUserPosts();
        console.log(temp);
    }
}

Answer 1

getUserPosts返回一个承诺，因此在对结果进行任何操作之前，您需要确保已兑现了承诺。

示例

export default class Profile extends React.Component{
    state = {
        postResult : {}
    };
    componentDidMount(){
        getUserPosts().then(temp => {
            console.log(temp);
        });
    }
}

Answer 2

您遇到的问题是axios返回一个Promise，而您没有等待Promise得到解决。因此，您的axios方法返回的值在控制台日志中为undefined。

在componentDidMount方法中应该使用的是：

getUserPosts()
.then((temp) => {
  console.log(temp);
});

更新：如果您使用的是Node v7.6.0或更高版本，则另一种方法是利用async和await关键字来要求您的代码等待承诺被解决。

所以您还可以使用：

componentDidMount () {
  let temp = await getUserPosts();
  console.log(temp);
}

从Axios返回结果

2 个答案: