从 Axios 返回数据

Question

我正在尝试从 axios API 调用返回响应。我不太明白什么是承诺，我发现他们只记录响应的所有教程/信息，我想返回它。

这是我所拥有的，但是当我调用 getPokemon 时，它是未定义的。

const axios = require('axios');

const getPokemon = () => {
    axios.get('https://pokeapi.co/api/v2/pokemon/')
    .then(function (response) {
        console.log("Response:", response.data.results);
        return response.data.results;
    })
    .catch(function (error) {
        return null;
    });
}

export {getPokemon};

Answer 1

如果这是一个 React 应用程序，那么你想在 componentDidMount 中调用 Axios。 Axios 会自动返回一个 Promise。

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ""
    };
  }

  componentDidMount() {
    axios
      .get("https://pokeapi.co/api/v2/pokemon/")
      .then(res => {
        console.log(res);
        this.setState({
          data: res.data.results
        });
      })
      .catch(err => {
        console.log(err);
      });
  }
  render() {
    let pokemon = this.state.data;
    let display = Object.values(pokemon).map((item, key) => {
      return (
        <div>
          <p>{item.name}</p>
          <p>{item.url}</p>
        </div>
      );
    });

    return (
    <div>{display}</div>
    );
  }
}

export default Example;

这样做会在 React 应用加载并设置组件状态的 JSON 数据后发送 Axios 请求。您应该可以通过this.state.data 访问 JSON 数据。

看看这个Codepen example with working API call。

Answer 2

首先，我建议您阅读有关承诺的内容。 实现所需的一个好方法是使用 async/await 语法检查以下代码：

const axios = require('axios');

const getPokemon = async () => {
    try{
       let res = await axios.get('https://pokeapi.co/api/v2/pokemon/');
       return res.data.results;
    }
    catch(error){
      return null //that's what you did in your code.
    }
}

export {getPokemon};