axios 不工作，而 fetch 工作

Question

我想从 /{url} 获取数据（数组），我尝试了这段代码

// Fetch the list on first mount
componentDidMount() {
this.getList();
}

// Retrieves the list of items from the Express app
getList = () => {

fetch('/main')
.then(res => res.json())
.then(list => this.setState({ list }))
}

这工作正常，但后来我决定切换到 axios 并尝试了完全相同的代码

  // Fetch the list on first mount
componentDidMount() {
this.getList();
}

 // Retrieves the list of items from the Express app
 getList = () => {
 axios.get('/main')
.then(res=> res.json())
.then(list => this.setState({list}))

}

但它没有工作，并在这一行给了我错误：.then(res=> res.json()) 所以我不知道有什么问题，如果有人知道线索，如果你告诉我，我会很高兴

Answer 1

这是因为 axios 有不同的响应，而不是 res.json() 返回数据已经像：return res.data 或直接将其传递给状态类似

getList = () => {
 axios.get('/main')
   .then(res=> this.setState({list: res.data}))

Answer 2

// Fetch the list on first mount
componentDidMount() {
  this.getList();
}

// Retrieves the list of items from the Express app
getList = () => {
 axios.get('/main')
 .then(res=> res.data)
 .then(list => this.setState({list}))
 .catch(error => this.setState({error: error.message}))
}

Answer 3

我会建议对您的设计进行一些更改，因为我在许多项目中都成功使用了 axios，这不是必需的，但它会有所帮助并且工作非常可靠：

创建类似 api.js 的服务

import axios from 'axios';

export default axios.create({
  baseURL: `http://my.api.url/`
});

那你就可以这样使用了

import API from '../Services/api'; // this is your service you created before

LoadStats = async event => {
    try {
        var response = await API.get('api/targetroute');
        if (response.data != null) {
            this.setState({
                stats: {
                    mydata: response.data
                }
            });
            console.log('Receiving result: '+JSON.stringify(response.data));
        }
    } catch (error) {
        console.log('ERROR: '+error)
    }
}