react学习（十四）fetch方式发送http请求获取数据

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"

效果展示：