把浏览器请求分为三种：通用请求、Ajax请求、WebSocket请求，每种都有不同的生成方式，下面我们一起聊聊这个思路今天的主线。1、通用请求这里所说的通用请求是指浏览器会直接显示响应体数据，这些请求会刷新/跳转页面。说的通俗一些，就是指控制台Network面板中显示的除XHR和WS部分之外的请求。比如js、css、img资源。2、Ajax请求Ajax请求也是由浏览器发送的，但不会对界面进行任何操作。它只是调用监控回调函数并传入响应相关数据。发送Ajax请求的方式有3种：XHR、Fetch、Axios等，这些请求都不是Ajax请求。2.1XHRXMLHttpRequest（XHR）对象是最先将Ajax推上历史舞台的关键技术。虽然已经有些过时的猜想，但还是有必要提一下。下面我们按照一个请求的整个生命周期来看一下这个技术。1.对象实例化既然要使用XHR，那么第一步就是实例化对象constxhr=newXMLHttpRequest();2、初始化操作对象实例化后，是否需要马上初始化？要求是什么？对谁，通过什么请求，请求是同步的还是异步的？应对的话，还是需要设置请求头（默认配置不一定能满足我们高层的要求）。比如你要发送json格式的内容，需要设置Content-Type为application/jsonxhr.setRequestHeader('Content-Type','application/json');四、接收请求准备浏览器除了设置常见的请求头外，还需要指定响应数据类型，接收到响应后会自动解析。目前支持的类型有string、arraybuffer、blob、document、json、text、ms-stream。xhr.responseType('json')5.发送请求的前期工作就绪，接下来就是激动人心的时刻了。看起来不错，您必须按开始按钮发送请求。xhr.send(data)6.倾听和回应。如果我叫美女，她必须回应。毕竟面子值在这，不回应太可惜了！！！为了等待别人的响应，那么需要分三步进行：进入监听状态，通过onreadystatechange放到这里监听。等待正面回应。readyStatus表示当前状态。当readyStatus为4（请求完成）时，认为响应已收到并处理。我无法一次处理所有回复。毕竟，我是一个要面子的人。我绝对只想接收我喜欢的信息。我喜欢200到299之间的状态码，其他都通过。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/XMLHttpRequest2.2获取。任务，该技术更易于使用，界面更现代，可用于现代网络工具，如网络工作者。（Fetch必须是异步的，XMLHttpRequest可以是同步的也可以是异步的）。constpayload=JSON.stringify({test:'test'});letheadersObj=newHeaders({'Content-Type':'application/json'});letrequest=newRequest('http://localhost:8080');获取(request,{method:'POST',body:payload,headers:headersObj}).then((response)=>response.json()).then(console.log)上面的代码虽然简单，但是已经包含了FetchAPI中的所有概念：fetch、Headers、Request、Response、Body混入。1.fetch()fetch()方法暴露在全局范围内，包括主页面执行线程、模块和工作线程。调用此方法时，浏览器将向给定的URL发送请求。(1)fetch(input[,init])：接收两个参数，input是要获取的资源，__init是一个配置对象，配置需要传入的参数，满足更复杂的需求(2)返回一个promise对象，从而链式处理2.Headers相当于response/request的header信息，可以让你查询这些header信息，或者针对不同的结果进行不同的操作。该对象包括检索、设置、添加和删除。设置好你需要的header信息后，就可以挂载到fetch中的配置信息中了。3.Request该对象是获取资源请求的接口，暴露请求及相关信息。该对象的一个??实例可以作为fetch函数中的第一个参数。4.Response该对象是获取资源响应的接口，并公开响应的相关信息。5.Bodymix-in提供response/request中body相关的方法，可以定义其内容形式和处理方式。Bodymix-in中提供了五个方法，用于将ReadableStream转储到缓冲区的内存中，将缓冲区转换为JavaScript对象类型，并通过Promise生成结果。(1)Body.text()：返回Promise，解析dumpbuffer得到的UTF-8格式字符串(2)Body.json()：返回Promise，解析dumpbuffer得到的JSON(3)Body.formData(4)Body.arrayBuffer()：返回Promise，解析dumpbuffer得到的FormData实例(4)Body.arrayBuffer()：返回Promise，解析dumpbuffer得到的ArrayBuffer(5)Body.text()：返回Promise，解析Blobdumpingbuffer得到的实例2.3AxiosAxios应该是前端最流行的Ajax请求库了，具有以下特点：基于Promise的异步Ajax请求库可以同时支持浏览器端和节点端的请求/响应拦截服务端支持请求取消请求/响应数据转换批量发送请求//默认配置axios.defaults.baseURL='http://localhost:8080'//请求拦截器axios.interceptors.request.use(config=>{console.日志（'requestinterceptorresolved'）;returnconfig;}，error=>{console.log('requestinterceptorrejected');returnPromise.reject(error);});//响应拦截器axios.interceptors.response.use(response=>{console.log('responseinterceptorresolved');returnresponse;},error=>{console.log('responseinterceptorrejected');returnPromise.reject(error);});letcancel;//Axios('/',{method:'post',headers:{'Content-Type':'application/json'},data:{test:'test'},//取消请求cancelToken:newaxios.CancelToken((c)=>{cancel=c;})}).then((response)=>{console.log(response.data)})//如果要取消请求，直接调用下面的函数//cancel();上面的代码已经包含了axios库中的大部分核心内容，包括axios()函数、默认设置、请求/响应拦截器、取消请求（内部设计的很巧妙，想看的请看下篇讲解要知道）1.axios()完成相应的配置并发送请求和调用方法有很多语法糖，同学们可以根据需要使用。2、默认设置可以通过axios.defaults.xxx完成很多全局配置，提高代码复用。（提高重用真的是一个完美的编码思想）3.请求/响应拦截器请求拦截器的作用是在发送请求之前进行一些系列的处理；响应拦截器的作用是在触发请求的回调之前执行响应拦截器。对response做一些预处理操作4.取消请求通过配置cancelToken对象，缓存取消请求的cancel函数，在需要的时候触发取消请求的函数（内部其实调用的是xhr.abort()）Formore使用详见文档https://github.com/axios/axios3.WebSocketRequest下面说说这个传说中的协议——WebSocket。WebSockt通过长期连接实现与服务器的全双工双向通信。（特别提醒：同源策略不适用于WebSocket）letws=newWebSocket('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()函数向服务器发送内容；当服务器发送消息时，可以触发消息事件，并通过event.data属性获取其有效负载。这篇文章虽然比较简单，但是可以帮助我们认识请求其实分为三类。这是我最大的成就。欢迎朋友们提出自己的想法。本文转载自微信公众号“牵着风筝”，可通过以下二维码关注。转载本文请联系风筝持有人公众号。
