1 Promise语法
Promise语法符合“关注分离”原则,即把一个复杂的事情,分离出几个阶段,每一个阶段都会返回一个响应,前一个响应成功之后才进行下一阶段。
例子:比如我想让小明去打瓶酱油,第一步,小明出了小区首先看一下商店是否开门,然后小明给我一个Response说开门,然后第二步,小明到达商店,询问店员是否有酱油,店员说只有老抽,没有生抽,然后小明再给我一个Response,问我只有老抽买不买,我说买。第三步小明提着一瓶老抽回来了。
详细介绍待补充。
2 fetch介绍
传统我们使用xhr(XmlHttpResquest)发送请求。其实浏览器还自带另一种Promise风格的请求方式fetch。
例子:
我们修改react学习(十三)使用axios请求后台和配置代理中的实例,改为使用fetch方式发送请求
import React, { Component } from 'react';
class App extends Component {
getStudentData = ()=>{
// axios.get('http://localhost:3000/student').then(
// response => {console.log('成功了',response.data)},
// error => {console.log('失败了',error)}
// )
fetch('http://localhost:3000/student').then(
response => {
console.log('联系服务器成功了', response)
return response.json()
},
error => {
console.log('联系服务器失败了',error)
return new Promise(()=>{})
}
).then(
response => {
console.log('获取数据成功了',response)
},
error => {console.log('获取数据失败了',error)}
)
}
render() {
return (
<div>
<button onClick={this.getStudentData}>点我获取学生数据</button>
</div>
);
}
}
export default App;
第一个then返回一个Promise对象,第二个then返回真正的数据。
packages.json中的配置
"proxy": "http://localhost:5000"
效果展示: