# AJAX
对于ajax而言,我们可以在componentWillMount 生命周期或者componentDidMount 进行。**建议采用componentDidMount **因为以后大家有机会接触 React-Native的话是没有componentWillMount 这个生命周期的。
## 代理
~~~
devServer: {
open:true,
port:3000,
hot:true,
proxy:{ //开启代理
'/api':{//请求地址以 /api开始 才走代理
target:'http://www.520it.com',//真实的请求地址服务器
pathRewrite:{'^/api':''}
}
}
}
~~~
## 在Life组件中使用添加生命周期进行ajax
~~~
async componentDidMount() {
let res = await fetch('/api/ke/js/data.json')
let data = await res.json();
console.log(data);
}
~~~
打印结果
```
{types: Array(4), teacher: Array(10), video: Array(272), banner: Array(3)}
```
看到下面的效果说明数据已经获取成功。
- webpack复习
- React基础
- 前端三大主流框架对比
- React中几个核心的概念
- React基础语法
- React JSX语法
- React组件
- 普通组件
- 组件通信-父向子传递
- 组件拆成单个文件
- 面向对象复习
- Class组件基础
- Class组件的私有状态(私有数据)
- 案例:实现评论列表组件
- 组件样式管理
- 组件样式分离-样式表
- CSS模块化
- 生命周期
- React组件生命周期
- Counter组件来学习组件生命周期
- 生命周期总结
- 生命周期案例
- React评论列表
- React双向数据绑定
- React版todolist
- 其它提高(了解)
- 组件默认值和数据类型验证
- 绑定this并传参的三种方式
- 祖孙级和非父子组件传递数据(了解)
- React路由
- 路由基础
- 动态路由
- 路由严格模式
- 路由导航定位
- 路由重定向
- 路由懒加载
- WolfMovie项目
- 项目初始化
- AntDesign使用
- 其它相关了解