[[352281]]

對瀏覽器的請求進(jìn)行劃分，可以分為三類：一般請求、Ajax請求、WebSocket請求，對于每種請求都有不同的產(chǎn)生方式，今天就以這個思想為主線來一起嘮一嘮。

一、一般請求

此處說的一般請求就是指瀏覽器會直接顯示響應(yīng)體數(shù)據(jù)，這些請求會刷新\跳轉(zhuǎn)頁面。換個更加容易理解的說法吧，指的就是控制臺Network面板中除了XHR和WS部分顯示的請求。例如js、css、img資源。

二、Ajax請求

Ajax請求也是由瀏覽器發(fā)出，但是不會對界面進(jìn)行任何操作，只是調(diào)用監(jiān)視的回調(diào)函數(shù)并傳入響應(yīng)相關(guān)數(shù)據(jù)，發(fā)出Ajax請求可以通過三種方式：XHR、Fetch、Axios，其余的均不是Ajax請求。

2.1 XHR

最早將Ajax推到歷史舞臺的關(guān)鍵技術(shù)就是XMLHttpRequest(XHR)對象，雖然目前已經(jīng)有了一些過時的嫌疑，但是還是很有必要提一下它。下面就按照一個請求的整個生命周期來看一看該技術(shù)。

一、 對象的實例化

既然要使用XHR，第一步就是要將該對象實例化

const xhr = new XMLHttpRequest(); 

二、初始化操作

將對象實例化后是不是緊接著就需要進(jìn)行初始化操作，到底該請求要發(fā)給誰、通過什么請求發(fā)、該請求到底是同步發(fā)還是異步發(fā)

xhr.open(method, url, async) 

三、請求頭設(shè)置

了解網(wǎng)絡(luò)的同學(xué)本肯定知道請求頭的概念，既然要與后端打交道，請求頭還是有必要進(jìn)行設(shè)置的(默認(rèn)的配置不一定滿足我們高大上的需求)，例如想發(fā)送json格式的內(nèi)容，這個時候就需要設(shè)置Content-Type為application/json

xhr.setRequestHeader('Content-Type', 'application/json'); 

四、接收請求的準(zhǔn)備工作

瀏覽器除了設(shè)置常見的請求頭外，還需要指定響應(yīng)數(shù)據(jù)類型，得到響應(yīng)后后自動解析。目前支持的類型有string、arraybuffer、blob、document、json、text、ms-stream。

xhr.responseType('json') 

五、發(fā)送請求

前期工作都準(zhǔn)備好了，接下來就是激動人心的時刻了，看好呀，要按開始鍵發(fā)送請求啦。

xhr.send(data) 

六、監(jiān)聽響應(yīng)

我喊一聲美女，人家肯定要回應(yīng)一下呀，畢竟顏值在這，不回應(yīng)該是多么不給面子的一件事呀!!!為了等待人家的回應(yīng)，則需要分三步進(jìn)行：

1. 進(jìn)入監(jiān)聽狀態(tài)，放在這就是通過onreadystatechange進(jìn)行監(jiān)聽。
2. 等待正面回應(yīng)。readyStatus表征目前的狀態(tài)，當(dāng)readyStatus為4(請求完成)，響應(yīng)算是接收到了
3. 處理響應(yīng)。不能一股腦的處理全部響應(yīng)吧，畢竟也是要面子的人，我肯定只希望接收我喜歡的信息吧，就喜歡狀態(tài)碼在200~299之間的，別的一概pass掉。

xhr.onreadystatechange = () => { 
    if (xhr.readyState == 4) { 
        if (xhr.status >= 200 && xhr.status < 300) { 
            console.log(xhr.response); 
        } 
    } 
} 

七、中斷請求

正常流程算是走完了，肯定還有非正常流程，發(fā)起請求后我后悔了，不想得到對方的回應(yīng)了，此時仍然有辦法——中斷請求

xhr.abort() 

注：本文不是文檔學(xué)習(xí)，詳細(xì)使用請見https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

2.2 Fetch

長江后浪推前浪，互聯(lián)網(wǎng)技術(shù)發(fā)展這么快，出現(xiàn)了新的技術(shù)(Fetch)能夠執(zhí)行XMLHttpRequest對象的所有任務(wù)，該技術(shù)使用更容易，接口更現(xiàn)代化，能夠在Web工作線程等現(xiàn)代Web工具中使用。(Fetch必須是異步，XMLHttpRequest可同步可異步)。

const payload = JSON.stringify({ 
    test: 'test' 
}); 
 
let headersObj = new Headers({ 
    'Content-Type':'application/json' 
}); 
 
let request = new Request('http://localhost:8080'); 
 
fetch(request, { 
    method: 'POST', 
    body: payload, 
    headers: headersObj 
}) 
.then((response) => response.json()) 
.then(console.log) 

上述代碼雖然簡單，但是已經(jīng)囊括了Fetch API中所有的概念：fetch、Headers、Request、Response、Body混入。

1.fetch()

fetch()方法暴露在全局作用域中，包括主頁面執(zhí)行線程、模塊和工作線程，調(diào)用該方法，瀏覽器就會向給定URL發(fā)送請求。

(1)fetch(input[, init])：接收兩個參數(shù)，input為要獲取的資源，__init為一個配置對象，配置需要傳入的參數(shù)，滿足更多復(fù)雜的需求

(2)返回一個promise對象，從而鏈?zhǔn)降倪M(jìn)行處理

2.Headers

相當(dāng)于 response/request 的頭信息，可以使你查詢到這些頭信息，或者針對不同的結(jié)果做不同的操作。該對象包含檢索、設(shè)置、添加、刪除，設(shè)置完自己需要的頭信息后就可以將其掛載到fetch中的配置信息中。

3.Request

該對象是獲取資源請求的接口，暴露了請求和相關(guān)信息。可以將該對象的實例作為fetch函數(shù)中的第一個參數(shù)

4.Response

該對象是獲取資源響應(yīng)的接口，并暴露了響應(yīng)的相關(guān)信息。

5.Body混入

提供了與 response/request 中的 body 有關(guān)的方法，可以定義它的內(nèi)容形式以及處理方式。在Body混入中提供了5個方法，用于將ReadableStream轉(zhuǎn)存到緩沖區(qū)的內(nèi)存中，將緩沖區(qū)轉(zhuǎn)換為某種JavaScript對象類型，以及通過Promise產(chǎn)生結(jié)果。

(1)Body.text():返回Promise，解決將緩沖區(qū)轉(zhuǎn)存得到的UTF-8格式字符串

(2)Body.json():返回Promise，解決將緩沖區(qū)轉(zhuǎn)存得到的JSON

(3)Body.formData():返回Promise，解決將緩沖區(qū)轉(zhuǎn)存得到的FormData實例

(4)Body.arrayBuffer():返回Promise，解決將緩沖區(qū)轉(zhuǎn)存得到的ArrayBuffer

(5)Body.text():返回Promise，解決將緩沖區(qū)轉(zhuǎn)存得到的Blob實例

2.3 Axios

Axios應(yīng)該是目前前端最流行的Ajax請求庫，具有以下特點：

1. 基于Promise的異步Ajax請求庫
2. 瀏覽器端/node端都可以使用
3. 支持請求/響應(yīng)攔截器
4. 支持請求取消
5. 請求/響應(yīng)數(shù)據(jù)轉(zhuǎn)換
6. 批量發(fā)送請求

// 默認(rèn)配置 
axios.defaults.baseURL = 'http://localhost:8080' 
 
// 請求攔截器 
axios.interceptors.request.use( 
    config => { 
        console.log('request interceptor resolved'); 
        return config; 
    }, 
    error => { 
        console.log('request interceptor rejected'); 
        return Promise.reject(error); 
    } 
); 
 
// 響應(yīng)攔截器 
axios.interceptors.response.use( 
    response => { 
        console.log('response interceptor resolved'); 
        return response; 
    }, 
    error => { 
        console.log('response interceptor rejected'); 
        return Promise.reject(error); 
    } 
); 
 
let cancel; // 用于保存取消請求的函數(shù) 
axios('/', { 
    method: 'post', 
    headers: { 
        'Content-Type': 'application/json' 
    }, 
    data: { 
        test: 'test' 
    }, 
    // 取消請求 
    cancelToken: new axios.CancelToken((c) => { 
        cancel = c; 
    }) 
}) 
.then((response) => { 
    console.log(response.data) 
}) 
 
// 若想取消請求，直接調(diào)用下面函數(shù) 
// cancel(); 

上述代碼已經(jīng)囊括了Axios庫中大多數(shù)核心內(nèi)容，包括axios()函數(shù)、默認(rèn)設(shè)置、請求/響應(yīng)攔截器、取消請求(內(nèi)部設(shè)計的很巧妙，想知道的請看下期講解)

1.axios()

完成相應(yīng)配置并發(fā)送請求，調(diào)用方式有多種語法糖，同學(xué)們可以按需使用。

2.默認(rèn)設(shè)置

通過axios.defaults.xxx可以完成很多全局配置，提高代碼的復(fù)用。(提高復(fù)用真是完美的編碼思想)

3.請求/響應(yīng)攔截器

請求攔截器的作用就是在請求發(fā)送之前先進(jìn)行一些列的處理;響應(yīng)攔截器的作用就是觸發(fā)請求的回調(diào)之前執(zhí)行響應(yīng)攔截器，對響應(yīng)做一些預(yù)處理操作

4.取消請求

通過配置cancelToken對象并緩存用于取消請求的cancel函數(shù)，在需要的時候觸發(fā)該函數(shù)取消請求(內(nèi)部其實就是調(diào)用的xhr.abort())

對于更多使用見詳細(xì)使用文檔https://github.com/axios/axios

三、WebSocket請求

下面來聊聊這個傳奇協(xié)議——WebSocket，WebSockt通過一個長時連接實現(xiàn)與服務(wù)器全雙工、雙向的通信。(特別提醒：同源策略不適用于WebSocket)

let ws = new WebSocket('ws://127.0.0.1:8080'); 
 
// 在連接建立成功時 
ws.onopen = () => { 
    ws.send('websocket') 
} 
 
// 在接收到消息時 
ws.onmessage = (event) => { 
    console.log(event.data); 
} 
 
// 在發(fā)生錯誤時 
ws.onerror = () => { 
    console.log('error'); 
} 
 
// 在連接關(guān)閉時 
ws.onclose = () => { 
    console.log('close'); 
} 

上述代碼已經(jīng)囊括大部分WebSocket的概念，實例化WebSocket建立與服務(wù)端的連接;通過事件監(jiān)聽即可了解WebSokcet連接目前的狀態(tài);通過send()函數(shù)即可向服務(wù)端發(fā)送內(nèi)容;當(dāng)服務(wù)端發(fā)送消息時即可觸發(fā)message事件，通過event.data屬性獲取其有效載荷。

本篇文章雖然比較簡單，但是可以幫助我們認(rèn)清楚請求其實是分為三類的，這是我最最最大的收獲，歡迎小伙伴們能夠給出自己的想法。

本文轉(zhuǎn)載自微信公眾號「執(zhí)鳶者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系執(zhí)鳶者公眾號。