在react中，使用axios获取后台服务器数据的方法

在react项目中获取数据的工具比较多，比如fetch axios, 这2个应该是使用最多的，说下我在使用axios 时遇到的问题吧！

我的需求是要实现，所有的数据请求统一写到一个文档里面比如get-api.js 目的就是后期的维护，方便修改。但是axios 获取到的数据是无法return出去的，所以我的实现方案是这样的：

首先把整个axios.get() 传出去：

// get-api.js
import React,{Component} from 'react'
import axios from 'axios'
const host = 'https://localhost:3100/'

const getNewList=()=>{
    return axios.get(host+"selfJson/news.json")
        .then( (response)=> response.data.data)
        .catch(function (error) {
            console.log(error);
        })
}

export {getNewList};

其次：通过promise 获取参数

// 调用的页面 写个接收数据的函数，让其在生命周期的挂载后执行
state = {
    tableData:[]
}
componentDidMount() {
        this.getJsonData();
    }
    // 把参数绑定到  构造函数的state里面
getJsonData = () => {
        const _this=this;
        const data = getNewList();
        data.then(function (resout) {
            _this.setState({tableData:resout})
        })

虽然这样实现复杂了，但是实现了统一管理api 的需求。

再说一个简单的使用案例，直接再需要参数的页面直接请求：

axios.get("https://localhost:3100/selfJson/news.json")
            .then(function (response) {
                let json = response.data.data;
                _this.setState({jsonData: json});
            })
            .catch(function (error) {
                console.log(error);
            })