聊一聊常见的网络请求方式（AJAX、$.ajax()、fetch 、axios）

JavaScript世界的网络请求

如果世界只有一个个单独的网站，那与原始时代没有区别，在网络的世界里面，信息是实时共享的，这也就需要一些列的操作去让网络之间连接起来，于是有了计算机网络规范，全世界使用同一套网络规范，在这个世界上进行交流，但是今天不讲计算机网络，今天讲一讲实际工作或学习中经常使用的看得到的网络请求方式。 ——来自summer的理解

1. ajax

相信只要从事计算机行业的同学，对于ajax绝对不陌生，因为现代浏览器，没有它基本就是废的。接下来一起看看它到底是什么吧！

Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。MDN

解释总是很准确和细致，但是就是晦（不）涩（说）难（人）懂（话），所以到底是什么呢？其实你就当它是一个帮你从别人服务器上要东西的一个电话工具，打电话告诉别人你要什么数据，要什么类型的，都在电话里一次性说好，别人看你说的清不清楚，再决定给你合适的数据。

好了，解释终于结束了，talk is cheap , show me the code !

let xhr;
//1 第一步，创建一个XMLHttpRequest 的实例对象！
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 浏览器执行代码
}
//创建请求
xhr.open("GET", "https://api.uixsj.cn/hitokoto/get?type=social", true);
//发送请求的数据
xhr.send();
//对请求的响应做出处理

// readyState: 0 请求未初始化， 1服务器已建立连接，2请求已接收，3请求处理中，4请求已完成，且响应已就绪
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}

优缺点环节：

优点:
1、不需要插件支持（window上的原生方法）
2、优秀的用户体验（无刷新更新数据、异步与服务器通信）
3、提高了性能和速度：减少了客户端和服务器之间的流量传输，同时减少了双方响应的时间，响应更快，因此提高了性能和速度
4、减轻服务器和带宽的负担，基于Ajax的应用程序使用较少的服务器带宽，因为无需重新加载完整的页面

缺点：
1.Ajax丢掉了Back与History功能，对浏览器机制的破坏（在动态更新页面的情况下，用户无法回到前一页的页面状态，因为浏览器仅能记忆历史纪录中的静态页面）
2.由于安全限制，只能使用它来访问服务于初始页面的主机的信息。如果需要显示来自其他服务器的信息，则无法在AJAX中显示。
3.对搜索引擎支持较弱
4.破坏程序的异常处理机制
5.禁用javascript的浏览器无法使用该应用程序

对于实例对象上的各种方法属性，个人觉得自行查看练习更佳！
以上代码就是一个简单的实例，所以解释的同学，请留下你的评论！或者前往菜鸟教程！

2. $.ajax()

总有人会创造一些NB的东西，为什么不能是你？
jQuery现在虽然不怎么火了，但是你还是得承认它牛（不服来battle）有本事你也写个东西，也可以让那么多人去用！
我jQuery虽然基本没怎么学，但是还是专门学了一点关于请求这部分的
不得不说，写原生的ajax谁写谁烦，各种情况还得我们自己去考虑
jQuery简化了很多的操作，直接上手吧，不多bb了

<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js">
</script>
<script>
    $.ajax({
        url: "https://api.uixsj.cn/hitokoto/get?type=social",
        method: "get",
        success: function(res) {
            console.log(res)
        }
    })
</script>

看看这个是不是很方便，几行代码干了上面ajax的几行的事
对于$.ajax（）中的参数键值对所对应的作用，大家自行查阅，这里只做简单示例

优缺点环节：

优点：
1.实现了对原生ajax的请求的封装
2.一定程度上解决了ajax多个连续相关请求产生回调地狱的问题
2.支持JSONP

缺点：
1.★ 本身是针对MVC的编程,不符合现在前端MVVM的浪潮、配置和调用方式非常混乱，而且基于事件的异步模型不友好
2.基于原生的XHR开发，XHR本身的架构不清晰,已经有了fetch的替代方案
3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
4.不符合 关注点分离（ Separation of Concerns ）的原则

3. fetch

时代在进步，技术在迭代。不进则退！

fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。 —— 阮一峰

与ajax的区别：

1.fetch是基于promise的，xhr使用回调函数
2.fetch对于请求、响应等等做了模块化（分类包装），ajax使用xhr一个接口去管理、
3.fetch是window上的方法，xhr是XMLHttpRequest的实例
4.fetch 是 ES6 的规范
5.fetch 兼容性不好，所有的 IE 浏览器都不支持! ajax 兼容性好，几乎所有主流浏览器都支持

与 $.ajax ( ) 的区别：

1.fetch 不会发送跨域 cookies
2.fetch 在接受到一个错误的HTTP 状态码时（即使响应的 HTTP 状态码是 404 或 500），返回的 Promise 不会被标记为 reject，相反，它会将 Promise 状态标记为 resolve，仅当网络故障时或请求被阻止时，才会标记为 reject

实例：

fetch("https://api.uixsj.cn/hitokoto/get?type=social", {
 	method: 'get'
}).then(data => {
    return data.text()//这里有点反人性（我觉得！），这里通常是处理数据格式，第二个then才是响应得到的数据
}).then(data => {
    console.log(data);
})

简单实例——>掌握还得大家实际去敲一下哈

优缺点环节：

优点：
1.基于promise，解决了ajax中可能出现回调地狱的问题
2.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象中
3.更好更方便的写法
4.更加底层，提供的API丰富（request，response）
5.脱离了XHR，是ES规范里新的实现方式

缺点：
1.默认不带cookie，需要手动添加
2.兼容性对IE真的不友好，兼容性不好，需要借用第三方的 polyfill
3.fetch不支持abort,不支持超时控制，使用setTimeout及Promise.reject和Promise.race结合setTimeout实现的超时控制并不能阻止请求过程继续在后台执行，造成了量的浪费
4.fetch没有办法原生监测请求的进度，而XHR可以

4. axios

axios是什么？（我就不翻译了，有时候感觉英文表达力更强）

Axios is a promise-based HTTP Client for node.js and the browser.（我觉得这句解释的很到位）
It is isomorphic (= it can run in the browser and nodejs with the same codebase).
On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests.
————Axios API

这也是我经常使用的一种方式

axios也是基于promise的，但是相比于fetch，我觉得美多了
比如请求/响应拦截这块，使用axios写，超级舒服

不多说，上代码：

//方法一
axios.get("https://api.uixsj.cn/hitokoto/get?type=social").then(res => {
  console.log(res.data);
})
//方法二
axios({
   method: "get",
    url: "https://api.uixsj.cn/hitokoto/get?type=social",
}).then(res => {
    console.log(res.data);
})
//方法三
const instance = axios.create({//创建实例
    baseURL: 'https://api.uixsj.cn',
    timeout: 1000,
});
instance.get('/hitokoto/get?type=social').then(res => {
    console.log(res);
})

添加请求/响应拦截：

// 请求拦截
axios.interceptors.request.use(function (config) {
    // 在请求之前做的一些操作
    return config;
  }, function (error) {
    // 请求发送错误进行的操作
    return Promise.reject(error);
  });

// 响应拦截
axios.interceptors.response.use(function (response) {
    // 任何在 2xx 范围内的状态码都会触发这个函数
    // 处理响应
    return response;
  }, function (error) {
    // 任何超出 2xx 范围的状态代码都会触发此功能
    // 处理响应
    return Promise.reject(error);
  });

优缺点环节 :

优点 ：
1.从node.js创建http请求
2.在浏览器中创建XMLHttpRequest
3.支持Promise API
4.提供了一些并发请求的接口
5.支持拦截请求和响应
6.转换请求和响应数据
7.可以取消请求
8.自动转换JSON数据（返回的具有比较完整规范的接口数据）
9.客户端支持防御CSRF/XSRF

6. 自我封装（原理还是基于promise封装原生ajax）

说了那么多，终于到了自我封装的时刻了！

直接上代码👇👇

function myAxios(options) {
	if (!options.url) {
	    alert("请检查你的url！");
	    return;
	}
	return new Promise((resolve, reject) => {
	    const {
	        url,
	        method
	    } = options;
	    let xhr;
	    if (window.XMLHttpRequest) {
	        xhr = new XMLHttpRequest();//非IE浏览器
	    } else {
	        xhr = new ActiveXObject();//IE浏览器
	    }
	    switch (method) {
	        case "GET":
	            xhr.open(method, url, true);
	            break;
	        case "POST":
	            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	            xhr.open(method, url, true);
	            break;
	    }
	
	    xhr.send();
	    xhr.onreadystatechange = function() {
	        if (xhr.readyState == 4) {
	            if (xhr.status == 200) {
	                resolve(xhr.responseText);
	            } else if (xhr.status == 404) {
	                reject("404");
	            }
	        }
	    }
	    xhr.onerror = function(e) {
	        reject(e);
	    }
	}).catch(e => {
	    console.log(e);
	})
}
async function gets() {
	const res = await myAxios({
	    url: "https://api.uixsj.cn/hitokoto/get?type=social",
	    method: "GET"
	})
	console.log(res);
}
gets();

好了，总结到此结束，看完我觉得简单使用这些请求方法应该是没问题了，能彻底记住和掌握还是得上手啊！

看完了，给个赞再走呗😁❤

参考：
阮一峰
MDN
Axios API
思否
思否