【前后端数据交互】原生JS的Fetch请求封装

一、 AJAX 和 Fetch 对比

1.1 AJAX 概述

AJAX 是最早出现请求数据的方式，它不需要不需要刷新整个页面即可更新部分数据。
属于原生 JS 范畴 ，技术核心是 XMLHttpRequest 对象。
AJAX 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据
一般使用之前，我们都需要把它们封装使用，如下：

const ajax = function() {
   
    
    
	// 创建xhr对象
    // 判断浏览器是否支持XMLHttpRequest
    let xhr;
    if (window.XMLHttpRequest) {
   
    
    
        // 高级浏览器
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
   
    
    
        // IE低版本
        xhr = new ActiveXObject();
    } else {
   
    
    
        alert('你的浏览器不支持ajax')
    }

	// get 请求	
    this.get = function(url,param) {
   
    
    
        // param 为原始数据类型
        // get请求没有请求体，因此常常将数据放在地址上，作为请求头的一部分（query数据）
        xhr.open('get',url + '?param=' + param,true) // 第三个参数异步与否
        // 监听数据返回
        xhr.onreadystatechange = function() {
   
    
    
            if(xhr.readyState === 4 && xhr.status === 200) {