硬核知识点——浏览器中的三类五种请求

对浏览器的请求进行划分，能够分为三类：通常请求、Ajax请求、WebSocket请求，对于每种请求都有不一样的产生方式，今天就以这个思想为主线来一块儿唠一唠。
css

1、通常请求

此处说的通常请求就是指浏览器会直接显示响应体数据，这些请求会刷新\跳转页面。换个更加容易理解的说法吧，指的就是控制台Network面板中除了XHR和WS部分显示的请求。例如js、css、img资源。前端

2、Ajax请求

Ajax请求也是由浏览器发出，可是不会对界面进行任何操做，只是调用监视的回调函数并传入响应相关数据，发出Ajax请求能够经过三种方式：XHR、Fetch、Axios，其他的均不是Ajax请求。node

2.1 XHR

最先将Ajax推到历史舞台的关键技术就是XMLHttpRequest（XHR）对象，虽然目前已经有了一些过期的嫌疑，可是仍是颇有必要提一下它。下面就按照一个请求的整个生命周期来看一看该技术。ios

1、对象的实例化git

既然要使用XHR，第一步就是要将该对象实例化github

const xhr = new XMLHttpRequest();

2、初始化操做web

将对象实例化后是否是紧接着就须要进行初始化操做，到底该请求要发给谁、经过什么请求发、该请求究竟是同步发仍是异步发json

xhr.open(method, url, async)

3、请求头设置axios

了解网络的同窗本确定知道请求头的概念，既然要与后端打交道，请求头仍是有必要进行设置的（默认的配置不必定知足咱们高大上的需求），例如想发送json格式的内容，这个时候就须要设置Content-Type为application/json后端

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

4、接收请求的准备工做

浏览器除了设置常见的请求头外，还须要指定响应数据类型，获得响应后后自动解析。目前支持的类型有string、arraybuffer、blob、document、json、text、ms-stream。

xhr.responseType('json')

5、发送请求

前期工做都准备好了，接下来就是激动人心的时刻了，看好呀，要按开始键发送请求啦。

xhr.send(data)

6、监听响应

我喊一声美女，人家确定要回应一下呀，毕竟颜值在这，不回应该是多么不给面子的一件事呀！！！为了等待人家的回应，则须要分三步进行：

进入监听状态，放在这就是经过onreadystatechange进行监听。
等待正面回应。readyStatus表征目前的状态，当readyStatus为4（请求完成），响应算是接收到了
处理响应。不能一股脑的处理所有响应吧，毕竟也是要面子的人，我确定只但愿接收我喜欢的信息吧，就喜欢状态码在200~299之间的，别的一律pass掉。

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

7、中断请求

正常流程算是走完了，确定还有非正常流程，发起请求后我后悔了，不想获得对方的回应了，此时仍然有办法——中断请求

xhr.abort()

注：本文不是文档学习，详细使用请见https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

2.2 Fetch

长江后浪推前浪，互联网技术发展这么快，出现了新的技术（Fetch）可以执行XMLHttpRequest对象的全部任务，该技术使用更容易，接口更现代化，可以在Web工做线程等现代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)

上述代码虽然简单，可是已经囊括了Fetch API中全部的概念：fetch、Headers、Request、Response、Body混入。

fetch（）

fetch()方法暴露在全局做用域中，包括主页面执行线程、模块和工做线程，调用该方法，浏览器就会向给定URL发送请求。
（1）fetch(input[, init])：接收两个参数，input为要获取的资源，__init为一个配置对象，配置须要传入的参数，知足更多复杂的需求
（2）返回一个promise对象，从而链式的进行处理

Headers

至关于 response/request 的头信息，可使你查询到这些头信息，或者针对不一样的结果作不一样的操做。该对象包含检索、设置、添加、删除，设置完本身须要的头信息后就能够将其挂载到fetch中的配置信息中。

Request

该对象是获取资源请求的接口，暴露了请求和相关信息。能够将该对象的实例做为fetch函数中的第一个参数

Response

该对象是获取资源响应的接口，并暴露了响应的相关信息。

Body混入

提供了与 response/request 中的 body 有关的方法，能够定义它的内容形式以及处理方式。在Body混入中提供了5个方法，用于将ReadableStream转存到缓冲区的内存中，将缓冲区转换为某种JavaScript对象类型，以及经过Promise产生结果。

（1）Body.text():返回Promise，解决将缓冲区转存获得的UTF-8格式字符串

（2）Body.json():返回Promise，解决将缓冲区转存获得的JSON

（3）Body.formData():返回Promise，解决将缓冲区转存获得的FormData实例

（4）Body.arrayBuffer():返回Promise，解决将缓冲区转存获得的ArrayBuffer

（5）Body.text():返回Promise，解决将缓冲区转存获得的Blob实例

2.3 Axios

Axios应该是目前前端最流行的Ajax请求库，具备如下特色：

基于Promise的异步Ajax请求库

浏览器端/node端均可以使用

支持请求/响应拦截器

支持请求取消

请求/响应数据转换

批量发送请求

对于Axios仍是比较有意思的，本次只说一下其简单使用，下一期准备剖析一下其源码，有兴趣的小伙伴能够先搬好小板凳占个坑，关注一下。

// 默认配置
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);
    }
);

// 响应拦截器
axios.interceptors.response.use(
    response => {
        console.log('response interceptor resolved');
        return response;
    },
    error => {
        console.log('response interceptor rejected');
        return Promise.reject(error);
    }
);

let cancel; // 用于保存取消请求的函数
axios('/', {
    method: 'post',
    headers: {
        'Content-Type': 'application/json'
    },
    data: {
        test: 'test'
    },
    // 取消请求
    cancelToken: new axios.CancelToken((c) => {
        cancel = c;
    })
})
.then((response) => {
    console.log(response.data)
})

// 若想取消请求，直接调用下面函数
// cancel();

上述代码已经囊括了Axios库中大多数核心内容，包括axios()函数、默认设置、请求/响应拦截器、取消请求（内部设计的很巧妙，想知道的请看下期讲解）

axios()

完成相应配置并发送请求，调用方式有多种语法糖，同窗们能够按需使用。

默认设置

经过axios.defaults.xxx能够完成不少全局配置，提升代码的复用。（提升复用真是完美的编码思想）

请求/响应拦截器

请求拦截器的做用就是在请求发送以前先进行一些列的处理；响应拦截器的做用就是触发请求的回调以前执行响应拦截器，对响应作一些预处理操做

取消请求

经过配置cancelToken对象并缓存用于取消请求的cancel函数，在须要的时候触发该函数取消请求（内部其实就是调用的xhr.abort()）

对于更多使用见详细使用文档https://github.com/axios/axios

3、WebSocket请求

下面来聊聊这个传奇协议——WebSocket，WebSockt经过一个长时链接实现与服务器全双工、双向的通讯。（特别提醒：同源策略不适用于WebSocket）

let ws = new WebSocket('ws://127.0.0.1:8080');

// 在链接创建成功时
ws.onopen = () => {
    ws.send('websocket')
}

// 在接收到消息时
ws.onmessage = (event) => {
    console.log(event.data);
}

// 在发生错误时
ws.onerror = () => {
    console.log('error');
}

// 在链接关闭时
ws.onclose = () => {
    console.log('close');
}

上述代码已经囊括大部分WebSocket的概念，实例化WebSocket创建与服务端的链接；经过事件监听便可了解WebSokcet链接目前的状态；经过send（）函数便可向服务端发送内容；当服务端发送消息时便可触发message事件，经过event.data属性获取其有效载荷。

本篇文章虽然比较简单，可是能够帮助咱们认清楚请求实际上是分为三类的，这是我最最最大的收获，欢迎小伙伴们可以给出本身的想法。

1.若是以为这篇文章还不错，来个分享、点赞、在看三连吧，让更多的人也看到～

2.关注公众号前端巅峰，领取学习资料，按期为你推送原创深度好文

本文分享自微信公众号 - 前端巅峰（Java-Script-）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。