React ajax

React ajax

1 理解

1. 前置说明

   • React本身只关注于界面, 并不包含发送ajax请求的代码

   • 前端应用需要通过ajax请求与后台进行交互(json数据)

   • react应用中需要集成第三方ajax库(或自己封装)

2. 常用的ajax请求库

   （1）jQuery: 比较重, 如果需要另外引入不建议使用

   （2）axios: 轻量级, 建议使用

   • 封装XmlHttpRequest对象的ajax

   • promise风格

   • 可以用在浏览器端和node服务器端

2 axios

文档

https://github.com/axios/axios

相关API

1. get请求

   axios.get('/user?ID=12345')
     .then(function (response) {
       console.log(response.data);
     })
     .catch(function (error) {
       console.log(error);
     });
   
   axios.get('/user', {
       params: {
         ID: 12345
       }
     })
     .then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     });
   

2. post请求

   axios.post('/user', {
     firstName: 'Fred',
     lastName: 'Flintstone'
   })
   .then(function (response) {
   console.log(response);
   })
   .catch(function (error) {
   console.log(error);
   });
   

3 脚手架配置代理

方法一

在package.json中追加如下配置

"proxy":"http://localhost:5000"

说明：

1. 优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。
3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

方法二

1. 第一步：创建代理配置文件

   在src下创建配置文件：src/setupProxy.js
   

2. 编写setupProxy.js配置具体代理规则：

   // 新版本：const {createProxyMiddleware} = require('http-proxy-middleware');
   const proxy = require('http-proxy-middleware')
   
   module.exports = function(app) {
     app.use(
         // 新版本： createProxyMiddleware('/api1', {})
       proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
         target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
         changeOrigin: true, //控制服务器接收到的请求头中host字段的值
         /*
         	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
         	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
         	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
         */
         pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
       }),
       proxy('/api2', { 
         target: 'http://localhost:5001',
         changeOrigin: true,
         pathRewrite: {'^/api2': ''}
       })
     )
   }
   

说明：

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。

4 消息订阅-发布机制

1. 工具库: PubSubJS

2. 下载: npm install pubsub-js --save

3. 使用::

1)   import PubSub from 'pubsub-js' //引入

2)   PubSub.subscribe('delete', function(data){ }); //订阅

3)   PubSub.publish('delete', data) //发布消息

5 扩展：Fetch

文档

1. https://github.github.io/fetch/

2. https://segmentfault.com/a/1190000003810652

特点

1. fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求

2. 老版本浏览器可能不支持

相关API

1. GET请求

   fetch(url).then(function(response) {
       return response.json()
   }).then(function(data) {
       console.log(data)
   }).catch(function(e) {
       console.log(e)
   });
   

2. POST请求

   fetch(url, {
       method: "POST",
       body: JSON.stringify(data),
   }).then(function(data) {
       console.log(data)
   }).catch(function(e) {
       console.log(e)
   })
   

6 todoList案例相关知识点

	1.拆分组件、实现静态组件，注意：className、style的写法
	2.动态初始化列表，如何确定将数据放在哪个组件的state中？
				——某个组件使用：放在其自身的state中
				——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
	3.关于父子之间通信：
			1.【父组件】给【子组件】传递数据：通过props传递
			2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
	4.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value
	5.状态在哪里，操作状态的方法就在哪里

7 github搜索案例相关知识点

	1.设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。
	2.ES6小知识点：解构赋值+重命名
				let obj = {a:{b:1}}
				const {a} = obj; //传统解构赋值
				const {a:{b}} = obj; //连续解构赋值
				const {a:{b:value}} = obj; //连续解构赋值+重命名
	3.消息订阅与发布机制
				1.先订阅，再发布（理解：有一种隔空对话的感觉）
				2.适用于任意组件间通信
				3.要在组件的componentWillUnmount中取消订阅
	4.fetch发送请求（关注分离的设计思想）
				try {
					const response= await fetch(`/api1/search/users2?q=${keyWord}`)
					const data = await response.json()
					console.log(data);
				} catch (error) {
					console.log('请求出错',error);
				}