这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

一、本堂课重点内容：

HTTP 协议简介
HTTP 协议的基本结构与发展历程
常见场景中的 HTTP 协议应用
在不同的环境中发起 HTTP 请求
知识扩展，了解更多网络通信协议

二、详细知识点介绍：

初始HTTP

超文本传输协议，是一个基于TCP协议的应用层协议，分为请求与响应2个部分，是简单可扩展的协议，是无状态的协议。

协议分析

协议的发展历程

HTTP/0.9 单行协议

请求GET/mypage/html

只能响应HTML文档

HTTP/1.0 构建可扩展性

增加了Header

有了状态码

能够支持多种文档类型，丰富协议能够承载的语义

HTTP/1.1 标准化协议

连接复用

缓存

内容协商

HTTP/2 更优异的表现

二进制协议

压缩Header

服务器推送

HTTP/3 草案

报文

方法

GET

POST

PUT

DELETE

HEAD

CONNECT

OPTIONS

TRACE

PATCH

状态码

1xx：表示请求已经接收，继续处理

2xx：请求成功接收

3xx：重定向，要完成请求需要进行进一步操作

4xx：请求失败，客户端错误

5xx：服务端错误，无法实现请求

RESTful API

1.每一个URI代表一种资源

2.客户端与服务器之间传递这种资源的某种表现层

3.客户端通过HTTP method对服务器端资源进行操作，实现“表现层状态转化”。

场景分析

打开控制台，切换到network可以进行场景分析

通过各个参数我们可以分析出域名访问、资源类型、缓存策略等信息

实际应用

常用的请求库axios能够支持浏览器、nodejs环境，并且有丰富的拦截器

网络优化的手段：HTTP2、CDN动态加速、DNS预解析、网络预连接、域名手链或发散、压缩来加速、https性能优化

通过重试机制、缓存、数据安全可以保障稳定性

了解更多

WebSocket

浏览器与服务器进行全双工通讯的网络技术

QUIC

基于UDP封装，HTTP3的一部分

三、实践练习例子：

this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loginLoading = true;
          this.$axios.post("http://127.0.0.1:4523/m1/2177250-0-default/login",this.form).then((res) => {
            //成功则跳转页面
            if (res.data.success) {
              try{
                sessionStorage.setItem("user",JSON.stringify(res?.data?.data));
                sessionStorage.setItem("token",res.data.token);
              }catch(err){
                  console.log(err)
              }
              console.log(res)
              this.$router.push({
                path:"/user"  
              })
            }else {
              this.$message.error(res.data.msg);
              this.loginLoading = false;
            }
          })  
          .catch((err) => {
            this.$message.error("服务器连接失败，请稍后重试");
            this.loginLoading = false;
          });
        } else {
          return false;
        }
      });

四、课后个人总结：

HTTP是一个可以获取网络资源的协议，对于web而言是十分重要的，是进行数据交换的基础。当客户端请求时，服务端响应时，都离不开HTTP协议，它不但可以用来传输超文本文档，还可以用来传输图片、视频、表单。我们需要了解它的原理，并且学会如何请求数据。

HTTP学习 | 青训营笔记