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

Posted 2022-02-14 So istes immer

目录

参考博客

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>
    )