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协议请求