在react中,使用axios获取后台服务器数据的方法
程序员文章站
2022-05-09 20:57:52
在react项目中获取数据的工具比较多,比如fetch axios, 这2个应该是使用最多的,说下我在使用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); })
上一篇: HDU 5245 Joyful