ajax/axios/fetch区别及webSocket通信原理

ajax

  • 不符合现在前端MVVM的浪潮
  • 基于原⽣的XHR开发,XHR本⾝的架构不清晰
  • jQuery整个项⽬太⼤,单纯使⽤ajax却要引⼊整个jQuery

axios

  • 从 node.js 创建 http 请求
  • ⽀持 Promise API
  • 客户端⽀持防⽌CSRF
  • 提供了⼀些并发请求的接⼝

fetch

  • 更加底层,提供的API丰富(request, response)
  • 脱离了XHR,是ES规范⾥新的实现⽅式
  • fetch只对⽹络请求报错,对400,500都当做成功的请求,需要封装去处理
  • fetch默认不会带cookie,需要添加配置项
  • fetch没有办法原⽣监测请求的进度,⽽XHR可以

webSocket通信原理

  • 客户端会先发送⼀个HTTP请求,包含⼀个Upgrade请求头来告诉服务端要升级为 WebSocket协议
  • 服务器就会返回101状态码并切换为WebSocket协议建⽴全双⼯连接,后续信息将会通过这个协议进⾏传输

有⼏个头信息需要注意⼀下:

  • Sec-WebSocket-Key:客户端随机⽣成的⼀个base64编码
  • Sec-WebSocket-Accept:服务端经过算法处理后回传给客户端
  • Connection和Upgrade字段告诉服务器,客户端发起的是WebSocket协议请求

相关推荐

  1. ajax/axios/fetch区别webSocket通信原理

    2024-01-06 10:16:03       63 阅读
  2. WebSocket详解使用教程:打造高效的实时通信

    2024-01-06 10:16:03       43 阅读
  3. Python实现WebSocket通信

    2024-01-06 10:16:03       32 阅读
  4. iOS使用webSocket通信

    2024-01-06 10:16:03       32 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-06 10:16:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-06 10:16:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-06 10:16:03       82 阅读
  4. Python语言-面向对象

    2024-01-06 10:16:03       91 阅读

热门阅读

  1. 二叉树part04 算法

    2024-01-06 10:16:03       54 阅读
  2. 编写代码中常见问题汇总

    2024-01-06 10:16:03       53 阅读
  3. Python访问ElasticSearch

    2024-01-06 10:16:03       55 阅读
  4. 【node.js】使用nvm切换node环境

    2024-01-06 10:16:03       66 阅读
  5. ubuntu和centos设置永久路由route -n

    2024-01-06 10:16:03       60 阅读
  6. NLP基础——TF-IDF

    2024-01-06 10:16:03       54 阅读
  7. WPF 如何知道当前有多少个 DispatcherTimer 在运行

    2024-01-06 10:16:03       51 阅读