umi搭建react+antd项目（四）axios请求数据

1.下载axios

yarn add axios

2.在src下新建文件夹conf，再新增js文件：axiosConf.js

import axios from 'axios'axios.defaults.baseURL = "http://localhost:8000/"//api前缀const instance = axios.create({xsrfCookieName: 'xsrf-token'
});instance.interceptors.request.use(function (config) {return config;
}, function (error) {return Promise.reject(error);
});instance.interceptors.response.use(function (response) {return response.data
}, function (error) {return Promise.reject(error);
});
export default instance;

3.在index.js导入axios

import instance from '../conf/axiosConf';

4.在constructor初始化参数list

constructor(props) {super(props);this.state = {list: []}}

初始化请求在react的componentDidMount事件（在第一次渲染后调用）

componentDidMount() {instance.get("api/img").then(data => {this.setState({list: data.list});console.log(this.state.list);})}

在render中拼接div，最好做成组件，传参数，下一篇再说

render() {let userMessage;if (this.state.list.length == 0) {userMessage = <div></div>} else {userMessage=[]this.state.list.map((item, index) => {userMessage.push(<div key={index}>{item.src}</div>)})}return (<div>{userMessage}<Link to="/index2">index</Link></div>)}

6.显示效果如下：访问http://localhost:8000/

7.完整index.js

import React, {Component} from 'react';
import Link from 'umi/link';
import instance from '../conf/axiosConf';export default class index extends Component {constructor(props) {super(props);this.state = {list: []}}componentDidMount() {instance.get("api/img").then(data => {this.setState({list: data.list});console.log(this.state.list);})}render() {let userMessage;if (this.state.list.length == 0) {userMessage = <div></div>} else {userMessage=[]this.state.list.map((item, index) => {userMessage.push(<div key={index}>{item.src}</div>)})}return (<div>{userMessage}<Link to="/index2">index</Link></div>)}
}

umi搭建react+antd项目（四）axios请求数据相关推荐

umi搭建react+antd项目（一）环境配置
1.先创建文件夹,windows用户手动创建就行了 mkdir myReact && cd myReact 2.在myReact目下,执行脚手架命令,默认选择antd yarn cre ...
umi搭建react+antd项目（六）父子组件通讯
上一篇写了一个子组件,只是把值传入进来,这篇讲解在子组件修改父组件的数据 1.在index.js里,新增方法:updateImg 用于修改list集合 updateImg() {this.setSta ...
umi搭建react+antd项目（五）子组件编写
上一篇在index.js里面写了一个组件,不是很友好,我们现在分开写组件 1.新建component文件夹用于放置组件,src/component,新建list组件 import React, {Co ...
umi搭建react+antd项目（二）路由
1.我们在src下新增index2.js: import React, {Component} from 'react';export default class index2 extends Com ...
umi搭建react+antd项目（三）Mock 数据--模拟数据
1.添加mockjs yarn add mockjs 2.在mock目录下新建test.js List|10,返回list,10条数据 @image,随机生成img的url链接,mock内置函数 im ...
前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动所以封装 ...
Cli4.5.x 中使用axios请求数据
Cli4.5.x 中使用axios请求数据文章目录 Cli4.5.x 中使用axios请求数据前言一.安装并配置axios 1.安装axios 2.vue-axios 二.各种请求方法三.请求 ...
Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
接口测试中模拟post四种请求数据
转自作者:隋胖胖LoveFat 链接:https://www.jianshu.com/p/3b6d7aa2043a 来源:简书一.背景介绍在日常的接口测试工作中,模拟接口请求通常有两种方法,fi ...

umi搭建react+antd项目（四）axios请求数据

umi搭建react+antd项目（四）axios请求数据相关推荐

最新文章

热门文章