扩展：利用fetch发送网络请求

目录

参考博客

1.一些概念 

XHR（XMLHttpRequest）是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。
因为它太有用，其他浏览器也模仿部署了，ajax操作因此得以诞生。
AJAX（Asynchronous JavaScript），意思是：XML 异步的 JavaScript 和 XML。
ajax是基于浏览器提供的XMLHttpRequest对象来实现的。
自从有了ajax之后，我们就可以实现异步的加载网页。

XML（eXtensible Markup Language）指可扩展标记语言。
我们在浏览器中使用XMLHTTPRequest对象在服务器之间通信，传输的数据是使用XML的方式，但最终还是会被转换成json数据格式来被我们使用。

jQuery和axios都是对XML的封装，都是为了更方便地用XML。
但是，我们不用XML，用fetch也可以发网络请求，它解决了XML的一些缺陷，比如XML不符合关注分离（Separation of Concerns）的原则。
所谓关注分离，其实就是将问题进行分解。

2.代码举例

使用 XHR 发送一个 json 请求一般是这样

var xhr = new XMLHttpRequest();
xhr.open('GET', url);      //启动一个请求以备发送
xhr.responseType = 'json'; //指定响应的数据类型
//onload是回调函数，异步请求加载完成，并且readyState变为4后执行
xhr.onload = function() {
  console.log(xhr.response);
};
//ajax也是回调函数，在ajax请求出错后执行
xhr.onerror = function() {
  console.log("Oops, error");
};
xhr.send();               //发送特定的请求

使用 fetch 后，顿时看起来好一点（这里体会一下关注分离：先判断有没有联系上服务器）

fetch(url).then(function(response) {
  return response.json(); //首先判断能不能联系上服务器，可以就返回一个promise实例response.json()
}).then(function(data) {
  console.log(data);          //获取数据成功
}).catch(function(e) {
  console.log("Oops, error"); //获取数据失败
});

使用 ES6 的箭头函数之后：

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

使用 async/await (属于 ES7)做最终优化

try {
  let response = await fetch(url);   //首先判断能不能联系上服务器
  let data = await response.json();  //再判断能不能获取数据
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}
// 注：这段代码如果想运行，外面需要包一个 async function

3.改造案例：github用户搜索框

在此案例基础上改

其余文件不变 

/src/components/Search/index.jsx

import React, { Component } from 'react'
import PubSub from 'pubsub-js'

export default class Search extends Component {
  search = async ()=>{
    const {keyWordElement:{value:keyWord}} = this  //获取用户的输入内容
    //发送请求前通知List更新状态
    PubSub.publish('updateState',{isFirst:false,isLoading:true})
    //使用fetch发送网络请求
    try {
      const response = await fetch(`http://api.github.com/search/users?q=${keyWord}`)
      const data = await response.json()
      PubSub.publish('updateState',{isLoading:false,users:data.items})
    } catch(error) {
      PubSub.publish('updateState',{isLoading:false,err:error.message})
    }
  }
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search"/>&nbsp;
          <button onClick={this.search}>Search</button>
        </div>
      </section>
    )
  }
}