Axios指北
講道理還是fetch好用，SWR更是神奇。
Ajax
Asynchronous JavaScript + XML（異步 JavaScript 和 XML）, 其本身不是一種新技術(shù)，而是一個(gè)在 2005 年被 Jesse James Garrett 提出的新術(shù)語，用來描述一種使用現(xiàn)有技術(shù)集合的‘新’方法，包括： 或 , , , , , , 以及最重要的 。當(dāng)使用結(jié)合了這些技術(shù)的 AJAX 模型以后，網(wǎng)頁應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個(gè)頁面。這使得程序能夠更快地回應(yīng)用戶的操作。 -- MDN
Ajax有XMLHttpRequest和fetch兩種常用API，很多網(wǎng)站會混合這兩種方式進(jìn)行請求。
XMLHttpRequest API
一般的請求步驟：
新建XMLHttpRequest實(shí)例對象
調(diào)用open()方法，定義請求類型、URL、同步異步（在ajax中必須是異步）
調(diào)用send()方法，發(fā)送請求
接收服務(wù)端返回報(bào)文，處理返回?cái)?shù)據(jù)
reasystate是XMLHttpRequest實(shí)例的屬性，有01234五種取值
0表示初始化
1表示open方法調(diào)用完畢
2表示send方法調(diào)用完畢
3表示server端返回部分結(jié)果
4表示server端返回結(jié)果接收完畢
xhr方法的缺點(diǎn)：可能導(dǎo)致回調(diào)過多，代碼邏輯復(fù)雜混亂。axios基于xhr使用promise重新設(shè)計(jì)了API
fetch API
fetch使用Promise語法結(jié)構(gòu)，返回一個(gè)Promise，可以使用async/await。代碼比原始的XHR簡潔。
fetch第一個(gè)參數(shù)接收一個(gè)request對象或URL字符串
第二個(gè)參數(shù)init接收一個(gè)自定義對象，詳細(xì)配置請求的各部分內(nèi)容，如method、header、referrer等
fetch方法的缺點(diǎn)：沒有超時(shí)、abort、請求錯(cuò)誤需要自行判斷
Ajax跨域?qū)崿F(xiàn)——jsonp
一般不再使用此方法進(jìn)行跨域請求，這里只是記錄一下
一種非官方跨域數(shù)據(jù)交互協(xié)議，借助GET請求、script標(biāo)簽的src屬性可以進(jìn)行跨域請求的特性實(shí)現(xiàn)。
JSONP出現(xiàn)原因：根本原因在于瀏覽器的同源保護(hù)策略，網(wǎng)景公司提出的同源定義了只有當(dāng)協(xié)議、域名、端口都相同時(shí)，兩個(gè)網(wǎng)頁才被視為同源，非同源的頁面間不能讀取DOM、cookie、indexdb、localstorage，不能發(fā)送Ajax請求，以防惡意頁面進(jìn)行數(shù)據(jù)竊取。而使用Ajax的大多數(shù)場景下，需要web頁面請求遠(yuǎn)端數(shù)據(jù)，因此為了實(shí)現(xiàn)Ajax的跨域請求，JSONP被設(shè)計(jì)出來。
基本原理：服務(wù)端在請求中接收一個(gè)前端回調(diào)函數(shù)名，根據(jù)該函數(shù)名動態(tài)生成包含數(shù)據(jù)的js文件，交給前端執(zhí)行，前端執(zhí)行后得到結(jié)果數(shù)據(jù)。
例：
后端為了返回hello，可以返回：
此時(shí)web端接收到的返回內(nèi)容為
跨域?qū)崿F(xiàn)——CORS
跨源資源共享（，或通俗地譯為跨域資源共享）是一種基于 頭的機(jī)制，該機(jī)制通過允許服務(wù)器標(biāo)示除了它自己以外的其他（域、協(xié)議或端口），使得瀏覽器允許這些源訪問加載自己的資源?？缭促Y源共享還通過一種機(jī)制來檢查服務(wù)器是否會允許要發(fā)送的真實(shí)請求，該機(jī)制通過瀏覽器發(fā)起一個(gè)到服務(wù)器托管的跨源資源的“預(yù)檢”請求。在預(yù)檢中，瀏覽器發(fā)送的頭中標(biāo)示有 HTTP 方法和真實(shí)請求中會用到的頭。-- MDN
目前，通常使用服務(wù)端設(shè)置CORS響應(yīng)的方式進(jìn)行跨域請求。
CORS不會對所有類型的報(bào)文都進(jìn)行預(yù)檢，對于某些“簡單請求”（舊規(guī)范叫法，新規(guī)范棄用），簡單請求必須同時(shí)滿足以下條件：
使用GET/POST/HEAD方法
人為設(shè)置的標(biāo)頭字段都位于對CORS安全的標(biāo)頭字段集合中（僅人為設(shè)置了CORS允許設(shè)置的字段），集合：
text/plain
multipart/form-data
application/x-www-form-urlencoded
Accept
Accept-Language
Content-Language
Content-Type，其值僅限于：
Range，其值滿足簡單的范圍標(biāo)頭值
如果跨域請求由XMLHttpRequest對象發(fā)出，則要求其實(shí)例的upload屬性上未設(shè)置事件監(jiān)聽器（即xhr.upload.addEventListener()未調(diào)用）
請求中未使用ReadableStream對象
不同時(shí)滿足上述要求的請求則需要執(zhí)行預(yù)檢請求，瀏覽器會使用OPTIONS方法發(fā)起預(yù)檢請求（OPTIONS方法用于獲取目的資源所支持的通信選項(xiàng)，如服務(wù)器支持的請求方法、CORS預(yù)檢等）
Axios API基礎(chǔ)
?
Axios Config
從上述內(nèi)容可知，axios的請求主體部分位于request config中，config詳細(xì)構(gòu)造如下：
攔截器
攔截器可以在請求前和響應(yīng)后對結(jié)果進(jìn)行攔截處理
?
取消請求
總結(jié)
?能看懂別的項(xiàng)目里面使用的axios就行了，還是fetch好（
