Axios for REST api GET 中的 HTTP 失败

Question

我是 react-native 的新手，当我尝试从 RESR api 获取数据并且它很好地适用于 github api 时，我使用以下示例进行开发

https://blog.cloudboost.io/getting-started-with-react-native-and-redux-6cd4addeb29

我将其更改为从另一个 REST api 获取，它显示以下错误

HTTP Failure in Axios [Error: Network Error]
 Object {
   "error": Object {
     "data": "Network Error",
     "status": 0,
   },
   "meta": Object {
     "previousAction": Object {
       "payload": Object {
         "request": Object {
           "url": "/XXXX/list",
         },
       },
       "type": "my-awesome-app/repos/LOAD",
     },
   },
 "type": "my-awesome-app/repos/LOAD_FAIL",
}

你们有什么想法吗

Answer 1

您尝试在 tutorial 中使用的 url 配置似乎有问题你提到的。

我正在使用来自文档https://dog.ceo/api/breed/hound/images的这个api/p>

根据您在此处提到的教程和评论，api 和reducer 的相关更改

App.js

// Changing the URL here
const client = axios.create({
    baseURL: 'https://dog.ceo/',
    responseType: 'json'
});

猎犬列表.js

class HoundsList extends Component {
    componentDidMount() {
        this.props.listHounds('hound');
    }
    renderItem = ({ item }) => (
        <View style={styles.item}>
            <Text>{item}</Text>
        </View>
    );
    render() {
        const { hounds } = this.props;
        return (
            <FlatList
                styles={styles.container}
                data={hounds}
                renderItem={this.renderItem}
            />
        );
    }
}


const mapStateToProps = state => {
    return {
        hounds: state.hounds.message
    };
};

const mapDispatchToProps = {
    listHounds
};

export default connect(mapStateToProps, mapDispatchToProps)(HoundsList);

reducer.js

export const GET_HOUNDS = 'my-awesome-app/hounds/LOAD';
export const GET_HOUNDS_SUCCESS = 'my-awesome-app/hounds/LOAD_SUCCESS';
export const GET_HOUNDS_FAIL = 'my-awesome-app/hounds/LOAD_FAIL';

export default function reducer(state = { hounds: [] }, action) {
    switch (action.type) {
        case GET_HOUNDS:
            console.log('Loading')
            return { ...state, loading: true };
        case GET_HOUNDS_SUCCESS:
            console.log('Success')
            return { ...state, loading: false, hounds: action.payload.data };
        case GET_HOUNDS_FAIL:
            console.log('failure')
            return {
                ...state,
                loading: false,
                error: 'Error while fetching hounds list'
            };
        default:
            return state;
    }
}

export function listHounds(breed_name) {
    return {
        type: GET_HOUNDS,
        payload: {
            request: {
                url: `/api/breed/${breed_name}/images`
            }
        }
    };
}