Axios指北
讲道理还是fetch好用,SWR更是神奇。

Ajax
Asynchronous JavaScript + XML(异步 JavaScript 和 XML), 其本身不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括:-- MDN
或 , , , , , , 以及最重要的 。当使用结合了这些技术的 AJAX 模型以后,网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。
Ajax有XMLHttpRequest和fetch两种常用API,很多网站会混合这两种方式进行请求。

XMLHttpRequest API
一般的请求步骤:
新建XMLHttpRequest实例对象
调用open()方法,定义请求类型、URL、同步异步(在ajax中必须是异步)
调用send()方法,发送请求
接收服务端返回报文,处理返回数据
reasystate是XMLHttpRequest实例的属性,有01234五种取值
0表示初始化
1表示open方法调用完毕
2表示send方法调用完毕
3表示server端返回部分结果
4表示server端返回结果接收完毕
xhr方法的缺点:可能导致回调过多,代码逻辑复杂混乱。axios基于xhr使用promise重新设计了API

fetch API
fetch使用Promise语法结构,返回一个Promise,可以使用async/await。代码比原始的XHR简洁。
fetch第一个参数接收一个request对象或URL字符串
第二个参数init接收一个自定义对象,详细配置请求的各部分内容,如method、header、referrer等
fetch方法的缺点:没有超时、abort、请求错误需要自行判断

Ajax跨域实现——jsonp
一般不再使用此方法进行跨域请求,这里只是记录一下
一种非官方跨域数据交互协议,借助GET请求、script标签的src属性可以进行跨域请求的特性实现。
JSONP出现原因:根本原因在于浏览器的同源保护策略,网景公司提出的同源定义了只有当协议、域名、端口都相同时,两个网页才被视为同源,非同源的页面间不能读取DOM、cookie、indexdb、localstorage,不能发送Ajax请求,以防恶意页面进行数据窃取。而使用Ajax的大多数场景下,需要web页面请求远端数据,因此为了实现Ajax的跨域请求,JSONP被设计出来。
基本原理:服务端在请求中接收一个前端回调函数名,根据该函数名动态生成包含数据的js文件,交给前端执行,前端执行后得到结果数据。
例:
后端为了返回hello,可以返回:
此时web端接收到的返回内容为

跨域实现——CORS
跨源资源共享( ,或通俗地译为跨域资源共享)是一种基于 头的机制,该机制通过允许服务器标示除了它自己以外的其他 (域、协议或端口),使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求,该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中,浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。-- MDN
目前,通常使用服务端设置CORS响应的方式进行跨域请求。
CORS不会对所有类型的报文都进行预检,对于某些“简单请求”(旧规范叫法,新规范弃用),简单请求必须同时满足以下条件:
使用GET/POST/HEAD方法
人为设置的标头字段都位于对CORS安全的标头字段集合中(仅人为设置了CORS允许设置的字段),集合:
text/plain
multipart/form-data
application/x-www-form-urlencoded
Accept
Accept-Language
Content-Language
Content-Type,其值仅限于:
Range,其值满足简单的范围标头值
如果跨域请求由XMLHttpRequest对象发出,则要求其实例的upload属性上未设置事件监听器(即xhr.upload.addEventListener()未调用)
请求中未使用ReadableStream对象
不同时满足上述要求的请求则需要执行预检请求,浏览器会使用OPTIONS方法发起预检请求(OPTIONS方法用于获取目的资源所支持的通信选项,如服务器支持的请求方法、CORS预检等)

Axios API基础

Axios Config
从上述内容可知,axios的请求主体部分位于request config中,config详细构造如下:

拦截器
拦截器可以在请求前和响应后对结果进行拦截处理

取消请求

总结
能看懂别的项目里面使用的axios就行了,还是fetch好(