欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react中使用axios获取后台服务器数据

程序员文章站 2022-07-02 18:47:03
...

在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 = '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 的需求。

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

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);
            })
相关标签: axios