HTTP使用指南

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

课程重点

HTTP的定义以及基本特点
HTTP报文结构及发展历程
常见应用场景
在浏览器和node中使用

详细知识点

HTTP定义以及基本特点

定义 HTTP(Hyper Text Transfer Protocal)是超文本传输协议。它是应用层的协议，基于TCP.

特点无状态，没有记忆，简单可扩展，每个请求都是独立的。

HTTP报文结构与发展历程

报文结构 请求报文请求行+请求头+空行+请求

请求行: 请求方法 + 请求URL+ Http协议版本

POST /s?ie=utf-8 HTTP/1.1

请求方法

常见请求头：

空行：必须要有

请求体：get请求的请求体为空，post请求的请求体可以不为空，如下：

username=admin&password=admin

响应报文响应行+响应头+空行+响应体

响应行: 报文协议及版本 + 状态码以及状态描述

HTTP/1.1 200 OK

状态码

常见响应头：

空行：必须要有

响应体：Web服务器发送到客户端的实际内容，类型由Content-Type字段值决定。

HTTP的发展历程

常见应用场景

请求静态资源

状态码200来自磁盘缓存，说明该静态资源并没有从web服务器获取，而是从缓存中获取的。

强缓存：一年。

静态资源方案：缓存+CDN+文件名hash.

跨域

什么是同源?我们所说的同源是指两个或多个url的协议、域名、端口号三者均分别相同，那么这些url就是同源。而跨域问题就是由于浏览器的同源策略引起的，前后端分离开发部署的项目往往需要解决跨域问题。 解决跨域的方法： 后端配置CORS;配置代理服务器;ifram

在浏览器和node中使用

浏览器中

node中

从常用的请求库：axios支持浏览器和node环境，有丰富的拦截器

import axios from 'axios';
//const axios = require('axios'); // legacy way

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

总结

对于前端来说，性能提升不仅可以从页面渲染效率、js逻辑代码优化上入手，还可以从网络优化上入手：文件压缩，资源加载优化，CDN加速，https优化......都值得去学习和掌握，在此附上学习资源链接：blog.csdn.net/weixin_4351…

HTTP使用指南|青训营笔记