目录
前置说明
. 常用的ajax请求库
axios
相关API
配置代理 方法一
配置代理 方法二
案例—github用户搜索
ES6小知识点 解构赋值+重命名
消息订阅与发布机制
fetch发送请求（关注分离的设计思想）
list组件
search组件
前置说明
-
React本身只关注于界面, 并不包含发送ajax请求的代码
-
前端应用需要通过ajax请求与后台进行交互(json数据)
-
react应用中需要集成第三方ajax库(或自己封装)
. 常用的ajax请求库
-
jQuery: 比较重, 如果需要另外引入不建议使用
-
axios: 轻量级, 建议使用
-
封装XmlHttpRequest对象的ajax
-
promise风格
-
可以用在浏览器端和node服务器端
axios
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
相关API
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);
});
export default class App extends Component {
getStudentData = () => {
axios.get('http://localhost:3000/api1/students').then(
response => { console.log('成功了', response.data); },
error => { console.log('失败了', error); }
)
}
getCarData = () => {
axios.get('http://localhost:3000/api2/cars').then(
response => { console.log('成功了', response.data); },
error => { console.log('失败了', error); }
)
}
render() {
return (
<div>
<button onClick={this.getStudentData}>点我获取学生数据</button>
<button onClick={this.getCarData}>点我获取汽车数据</button>
</div>
)
}
}
使用代理服务器解决跨域问题 ：客户端请求代理服务器 代理服务器跟客户端处于同源下，由代理服务器转发给服务器（代理服务器跟服务器没有跨域问题）
代理服务器有指定的路由就不在转发给服务器（/index）
配置代理 方法一
在package.json中追加如下配置 ："proxy":"http://localhost:5000"
- 1. 优点：配置简单，前端请求资源时可以不加任何前缀。
- 2. 缺点：不能配置多个代理。
- 3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）
配置代理 方法二
第一步：创建代理配置文件 在src下创建配置文件：src/setupProxy.js
编写setupProxy.js配置具体代理规则：
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
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. 缺点：配置繁琐，前端请求资源时必须加前缀。
案例—github用户搜索
请求地址: https://api.github.com/search/users?q=xxxxxx
设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办
ES6小知识点 解构赋值+重命名
let obj = { a: { b: { c: 1 } } }
const { a: { b: { c: data } } } = obj
console.log(data);
消息订阅与发布机制
- 工具库: PubSubJS
- 下载: npm install pubsub-js --save
-
使用:
- import PubSub from 'pubsub-js' //引入
- PubSub.subscribe('delete', function(data){ }); //订阅
- PubSub.publish('delete', data) //发布消息
- 1.先订阅（接收方），再发布 （发送方）（理解：有一种隔空对话的感觉）
- 2.适用于任意组件间通信
- 3.要在组件的componentWillUnmount中取消订阅
fetch发送请求（关注分离的设计思想）
- fetch documentation
- fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
- 老版本浏览器可能不支持
- 传统 Ajax 已死，Fetch 永生 - SegmentFault 思否
try {
const response= await fetch(`/api1/search/users2?q=${keyWord}`)
const data = await response.json()
console.log(data);
} catch (error) {
console.log('请求出错',error);
}
相关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)
})
list组件
- 三元运算符连问 isFirst ? <h2>欢迎使用,输入关键字,最后点击搜索</h2> : isLoding ? <h2>Loadding.......</h2> :err ? <h2 style={{ color: 'red' }}>{err} </h2> :users.map((userObj)={}
- componentDidMount初始化钩子 componentWillUnmount即将卸载钩子
- import PubSub from 'pubsub-js' 发布订阅第三方库
- 接收数据订阅信息 PubSub.subscribe 记得取消订阅 PubSub.unsubscribe
import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './index.css'
export default class List extends Component {
render() {
const { users, isFirst, isLoding, err } = this.state
return (
<div className="row">
{
isFirst ? <h2>欢迎使用,输入关键字,最后点击搜索</h2> :
isLoding ? <h2>Loadding.......</h2> :
err ? <h2 style={{ color: 'red' }}>{err} </h2> :
users.map((userObj) => {
return (
<div className="card" key={userObj.id}>
<a href={userObj.html_url} target="_blank" rel="noreferrer">
<img alt='head_portait' src={userObj.avatar_url} style={{ width: '100px' }} />
</a>
<p className="card-text">{userObj.login}</p>
</div>
)
})
}
</div>
)
}
state = {
users: [],//初始值为数组
isFirst: true,//是否为第一次打开
isLoding: false,//标识是否处于加载中
err: ''//存储请求相关错误信息
}
//初始化状态订阅消息
componentDidMount() {
this.token = PubSub.subscribe('sub', (_, data) => {
this.setState(data)
})
}
//即将卸载
componentWillUnmount() {
//取消订阅·
PubSub.unsubscribe(this.token)
}
}
search组件
- PubSub.publish 发布消息 发送数据方
- promise.then 返回的值为非promise实例，这个promise为成功值为undefined
- 返回一个初始化状态的promise中断 可以防止穿透
- await 右边必须为promise实例，必须使用async修饰 使用try，catch捕获
- fetch发送请求（关注分离的设计思想）
import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios'
export default class Search extends Component {
render() {
return (
<section className="jumbotron">
<h3 className="jumbotron-heading">Search Github User</h3>
<div>
<input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键字点击搜索" />
<button onClick={this.search}>搜索</button>
</div>
</section>
)
}
// PubSub.publish 发布消息
search = async () => {
//获取用户的输入(连续解构赋值并重命名)
const { keyWordElement: { value: keyWord } } = this
// 发送请求前通知list更新状态
PubSub.publish('sub', { isFirst: false, isLoding: true })
// #region 发送网络请求-----------使用axios发请求
/* axios.get(`http://localhost:3000/api1/search/users?q=${keyWord}`)
.then(response => {
// 请求成功后通知list更新状态
PubSub.publish('sub', { isLoding: false, users: response.data.items })
},
error => { PubSub.publish('sub', { isLoding: false, err: error.message }) }
) */
// #endregion
//发送网络请求----使用fetch(未优化版)
// fetch(`/api1/search/users?q=${keyWord}`).then(
// response => {
// console.log('联系服务器成功了');
// return response.json()
// },
// ///返回的值为非promise实例，这个promise为成功值为undefined
// err => {
// console.log('联系服务器失败了', err);
// //返回一个初始化状态的promise中断
// return new Promise(() => { })
// }
// ).then(
// response => {
// console.log('获取数据成功了', response);
// },
// err => { console.log('获取数据失败了', err); }
// )
// 使用try，catch捕获
try {
const response = await fetch(`/api1/search/users?q=${keyWord}`)
//await 右边必须为promise实例，必须使用async修饰
const data = await response.json()
PubSub.publish('sub', { isLoding: false, users: data.items })
console.log(data);
} catch (error) {
console.log('请求出错了', error);
PubSub.publish('sub', { isLoding: false, err: error.message })
}
}
}
