【React】知识点归纳：react中使用axios获取后台服务器数据

React-Ajax: react中使用axios获取后台服务器数据，所有的数据请求统一写到一个文档里面

• react项目中获取数据的工具比较多，比如fetch 、axios, 这2个应该是使用最多的。
• 在练习的时候遇到一个问题：就是将所有的数据请求统一写到一个文档里面，比如get-api.js
• 目的就是后期的维护，方便修改。但是axios 获取到的数据是无法return出去的
  所以我的实现方案是这样的：

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

// get-api.js
import React,{Component} from 'react'
import axios from 'axios'
const host = 'http://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 的需求。

• 再说一个简单的使用案例，直接再需要参数的页面直接请求（我的上一篇blog案例用的就是这个方法，欢迎大家访问：https://blog.csdn.net/qq_41846861/article/details/86600088）：

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