文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 17:23

关注

对浏览器的请求进行划分,可以分为三类:一般请求、Ajax请求、WebSocket请求,对于每种请求都有不同的产生方式,今天就以这个思想为主线来一起唠一唠。

一、一般请求

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

二、Ajax请求

Ajax请求也是由浏览器发出,但是不会对界面进行任何操作,只是调用监视的回调函数并传入响应相关数据,发出Ajax请求可以通过三种方式:XHR、Fetch、Axios,其余的均不是Ajax请求。

2.1 XHR

最早将Ajax推到历史舞台的关键技术就是XMLHttpRequest(XHR)对象,虽然目前已经有了一些过时的嫌疑,但是还是很有必要提一下它。下面就按照一个请求的整个生命周期来看一看该技术。

一、 对象的实例化

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

  1. const xhr = new XMLHttpRequest(); 

二、初始化操作

将对象实例化后是不是紧接着就需要进行初始化操作,到底该请求要发给谁、通过什么请求发、该请求到底是同步发还是异步发

  1. xhr.open(method, url, async) 

三、请求头设置

了解网络的同学本肯定知道请求头的概念,既然要与后端打交道,请求头还是有必要进行设置的(默认的配置不一定满足我们高大上的需求),例如想发送json格式的内容,这个时候就需要设置Content-Type为application/json

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

四、接收请求的准备工作

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

  1. xhr.responseType('json'

五、发送请求

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

  1. xhr.send(data) 

六、监听响应

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

  1. 进入监听状态,放在这就是通过onreadystatechange进行监听。
  2. 等待正面回应。readyStatus表征目前的状态,当readyStatus为4(请求完成),响应算是接收到了
  3. 处理响应。不能一股脑的处理全部响应吧,毕竟也是要面子的人,我肯定只希望接收我喜欢的信息吧,就喜欢状态码在200~299之间的,别的一概pass掉。
  1. xhr.onreadystatechange = () => { 
  2.     if (xhr.readyState == 4) { 
  3.         if (xhr.status >= 200 && xhr.status < 300) { 
  4.             console.log(xhr.response); 
  5.         } 
  6.     } 

七、中断请求

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

  1. xhr.abort() 

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

2.2 Fetch

长江后浪推前浪,互联网技术发展这么快,出现了新的技术(Fetch)能够执行XMLHttpRequest对象的所有任务,该技术使用更容易,接口更现代化,能够在Web工作线程等现代Web工具中使用。(Fetch必须是异步,XMLHttpRequest可同步可异步)。

  1. const payload = JSON.stringify({ 
  2.     test: 'test' 
  3. }); 
  4.  
  5. let headersObj = new Headers({ 
  6.     'Content-Type':'application/json' 
  7. }); 
  8.  
  9. let request = new Request('http://localhost:8080'); 
  10.  
  11. fetch(request, { 
  12.     method: 'POST'
  13.     body: payload, 
  14.     headers: headersObj 
  15. }) 
  16. .then((response) => response.json()) 
  17. .then(console.log) 

上述代码虽然简单,但是已经囊括了Fetch API中所有的概念:fetch、Headers、Request、Response、Body混入。

1.fetch()

fetch()方法暴露在全局作用域中,包括主页面执行线程、模块和工作线程,调用该方法,浏览器就会向给定URL发送请求。

(1)fetch(input[, init]):接收两个参数,input为要获取的资源,__init为一个配置对象,配置需要传入的参数,满足更多复杂的需求

(2)返回一个promise对象,从而链式的进行处理

2.Headers

相当于 response/request 的头信息,可以使你查询到这些头信息,或者针对不同的结果做不同的操作。该对象包含检索、设置、添加、删除,设置完自己需要的头信息后就可以将其挂载到fetch中的配置信息中。

3.Request

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

4.Response

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

5.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请求库,具有以下特点:

  1. 基于Promise的异步Ajax请求库
  2. 浏览器端/node端都可以使用
  3. 支持请求/响应拦截器
  4. 支持请求取消
  5. 请求/响应数据转换
  6. 批量发送请求
  1. // 默认配置 
  2. axios.defaults.baseURL = 'http://localhost:8080' 
  3.  
  4. // 请求拦截器 
  5. axios.interceptors.request.use( 
  6.     config => { 
  7.         console.log('request interceptor resolved'); 
  8.         return config; 
  9.     }, 
  10.     error => { 
  11.         console.log('request interceptor rejected'); 
  12.         return Promise.reject(error); 
  13.     } 
  14. ); 
  15.  
  16. // 响应拦截器 
  17. axios.interceptors.response.use( 
  18.     response => { 
  19.         console.log('response interceptor resolved'); 
  20.         return response; 
  21.     }, 
  22.     error => { 
  23.         console.log('response interceptor rejected'); 
  24.         return Promise.reject(error); 
  25.     } 
  26. ); 
  27.  
  28. let cancel; // 用于保存取消请求的函数 
  29. axios('/', { 
  30.     method: 'post'
  31.     headers: { 
  32.         'Content-Type''application/json' 
  33.     }, 
  34.     data: { 
  35.         test: 'test' 
  36.     }, 
  37.     // 取消请求 
  38.     cancelToken: new axios.CancelToken((c) => { 
  39.         cancel = c; 
  40.     }) 
  41. }) 
  42. .then((response) => { 
  43.     console.log(response.data) 
  44. }) 
  45.  
  46. // 若想取消请求,直接调用下面函数 
  47. // cancel(); 

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

1.axios()

完成相应配置并发送请求,调用方式有多种语法糖,同学们可以按需使用。

2.默认设置

通过axios.defaults.xxx可以完成很多全局配置,提高代码的复用。(提高复用真是完美的编码思想)

3.请求/响应拦截器

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

4.取消请求

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

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

三、WebSocket请求

下面来聊聊这个传奇协议——WebSocket,WebSockt通过一个长时连接实现与服务器全双工、双向的通信。(特别提醒:同源策略不适用于WebSocket)

  1. let ws = new WebSocket('ws://127.0.0.1:8080'); 
  2.  
  3. // 在连接建立成功时 
  4. ws.onopen = () => { 
  5.     ws.send('websocket'
  6.  
  7. // 在接收到消息时 
  8. ws.onmessage = (event) => { 
  9.     console.log(event.data); 
  10.  
  11. // 在发生错误时 
  12. ws.onerror = () => { 
  13.     console.log('error'); 
  14.  
  15. // 在连接关闭时 
  16. ws.onclose = () => { 
  17.     console.log('close'); 

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

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

本文转载自微信公众号「执鸢者」,可以通过以下二维码关注。转载本文请联系执鸢者公众号。

 

来源:执鸢者内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯