axios не работает, пока fetch не работает - PullRequest
Новая
       18

axios не работает, пока fetch не работает

0 голосов
/ 24 февраля 2019

я хочу получить данные (массив) из / {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 ()), поэтому я не знаю, в чем проблема, если кто-нибудь знает ключ, я буду рад, если выскажи мне

Ответы [ 3 ]

0 голосов
/ 24 февраля 2019 
// 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}))
}
0 голосов
/ 14 марта 2019

Я бы порекомендовал некоторые изменения в вашем дизайне, так как я успешно использую 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)
    }
}
0 голосов
/ 24 февраля 2019

Это связано с тем, что axios имеет другой ответ, вместо res.json() возвращает данные, уже такие как: return res.data, или передает их непосредственно в состояние, подобное 

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