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);
})
推荐阅读
-
微信小程序授权 获取用户的openid和session_key【后端使用java语言编写】,我写的是get方式,目的是测试能否获取到微信服务器中的数据,后期我会写上post请求方式。
-
在react中,使用axios获取后台服务器数据的方法
-
react中使用axios获取后台服务器数据
-
React框架中用axios框架配置代理跨域访问服务器获取数据
-
微信小程序授权 获取用户的openid和session_key【后端使用java语言编写】,我写的是get方式,目的是测试能否获取到微信服务器中的数据,后期我会写上post请求方式。
-
在react中,使用axios获取后台服务器数据的方法
-
【React】知识点归纳:react中使用axios获取后台服务器数据