网络请求与前端 ｜ 青训营笔记

Artemis
134 阅读8分钟

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

网络请求的过程

我们在浏览器地址栏中输入一个网址然后回车，就会经历一次get请求，这个get请求返回的就是网址页面。我们来具体剖析以下网络请求的过程。

一个网络请求的发起大概会经历DNS解析、TCP三次握手、建立TCP连接后发生HTTP请求、服务器响应HTTP请求、浏览器解析html源码。同时请求html代码中的资源(如js、css、图片等)、浏览器渲染页面并呈现给用户。

🔗URL的组成

统一资源定位符（Uniform Resource Locator，URL）,统一资源名称（Uniform Resource Name，URN）是URI的子集。

Web上地址的基本形式是URI,它有两种形式：一种是URL，这是目前URI的最普遍形式。另一种就是URN，这是URL的一种更新形式，URN不依赖于位置，并且有可能减少失效连接的个数。但是其流行还需假以时日，因为它需要更精密软件的支持。

DNS解析

DNS解析又称作域名解析，DNS的全称是 Domain name System(域名系统)，互联网上作为域名和IP地址相互映射的一个分布式数据库。

一台电脑如果想和另一台通信就必须知道另一台电脑的IP地址和MAC地址，MAC地址一般都是动态获取的，即主机自己通过ARP协议获取，自己更新。但服务器的IP地址都是已知的，其实就类似于你要去取快递，如果你没收到快递单号，那也不用去驿站了

但是IP地址都遵循IPv4网络协议(IPv4在互联网流量中仍然占大头)，IPv6逐渐崛起，DNS解析只会更加重要。192.0.0.1这是一个IPv4网络协议的IP地址，一般我们都使用点分十进制，而IPv6的地址长度是是IPv4的4倍。IP地址将更加难记忆，所以有了域名。域名就像指针，指向的是IP地址，DNS解析就是通过域名解析IP地址的过程。

HTTP请求

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。

HTTP请求头提供了关于请求，响应或者其他的发送实体的信息。HTTP的头信息包括通用头、请求头、响应头和实体头四个部分。每个头域由一个域名，冒号（:）和域值三部分组成。

  • 通用头标：即可用于请求，也可用于响应，是作为一个整体而不是特定资源与事务相关联。

  • 请求头标：允许客户端传递关于自身的信息和希望的响应形式。

  • 响应头标：服务器和于传递自身信息的响应。

  • 实体头标：定义被传送资源的信息。即可用于请求，也可用于响应。

  • 根据上面的分类我们可以把他们分为:Request和Response两部分。

// Content-Type：返回内容的MIME类型。
'Content-Type': 'application/json'

网络请求

网络请求的类型

首先网络请求有以下类型：

  • GET ------ 请求网络指定位置的资源
  • POST ------ 向服务器提交数据，请求服务器进行数据处理
  • PUT ------ 向网络指定位置上传资源
  • DELETE ------ 请求服务器删除URL所标识的资源
  • HEAD ------ 只请求响应头部，响应体不会返回
  • TRACE ------ 回显服务器收到的请求，主要用于测试或诊断
  • PATCH ------ 实体中包含一个表，表中说明与该URI所表示的原内容的区别
  • MOVE ------ 请求服务器将指定的页面移至另一个网络地址
  • COPY ------ 请求服务器将指定的页面拷贝至另一个网络地址
  • LINK ------ 请求服务器建立链接关系
  • UNLINK ------ 断开链接关系

但是最常用的就那么几个，首先是GET和PUT，其次就是PUT和DELETE

AJAX

XMLHttpRequest

xhr.open()参数的含义：

① 请求的方式

② 请求的地址

③ 指定ajax请求是异步处理还是同步处理，默认为true即异步处理，同步一定会影响用户体验

const xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.setRequestHeader("", "");// 设置请求头
xhr.send();//发送请求，可携带参数
xhr.onreadystatechange = () => {
// 返回存有 XMLHttpRequest 的状态。
// 从 0 到 4 发生变化。0 未连接 1 打开连接 2 发送请求 3 交互 4 完成交互
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {//返回状态码
      var data = xhr.responseTEXT;
      return data;
    }
  }
}
fetch

默认get方法，可以不传递配置对象

fetch浏览器原生支持，写起来也简洁

fetch(url, {
  method: "get",
  headers: {
    // 请求头
  },
  body: {
    // 请求传递的参数
  }
})
const data = await res.json()
axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

状态码（Status Code）

HTTP 状态码用来表示特定的 HTTP 请求是否已成功完成。响应分为五类：信息响应(100–199)，成功响应(200–299)，重定向(300–399)，客户端错误(400–499)和服务器错误 (500–599)。

常见状态码：

CodeTextInformation
200OK成功
301Moved Permanently永久重定向
302Found临时重定向
403Forbiddenext禁止访问
404Not Found找不到文件

本地存储

Cookies

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie 主要用于以下三个方面：

  • 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
  • 个性化设置（如用户自定义设置、主题等）
  • 浏览器行为跟踪（如跟踪分析用户行为等）

Cookie 曾一度用于客户端数据的存储，因当时并没有其它合适的存储办法而作为唯一的存储手段，但现在随着现代浏览器开始支持各种各样的存储方式，Cookie 渐渐被淘汰。由于服务器指定 Cookie 后，浏览器的每次请求都会携带 Cookie 数据，会带来额外的性能开销（尤其是在移动环境下）。新的浏览器API已经允许开发者直接将数据存储到本地，如使用 Web storage API （本地存储和会话存储）或 IndexedDB 。

Ref: HTTP cookies - MDN

Storage(Local & Session)

  • Storage.getItem()

When passed a key name, will return that key's value.

  • Storage.setItem()

When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.

  • Storage.removeItem()

When passed a key name, will remove that key from the storage.

  • Storage.clear()

When invoked, will empty all keys out of the storage.

IndexDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

LocalForage: Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.

CORS

跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

跨源 HTTP 请求的一个例子：运行在 https://domain-a.com 的 JavaScript 代码使用来发起一个到 https://domain-b.com/data.json 的请求。

出于安全性，浏览器限制脚本内发起的跨源 HTTP 请求。 例如，XMLHttpRequest 和 Fetch API遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非响应报文包含了正确 CORS 响应头。

跨源域资源共享（CORS）机制允许 Web 应用服务器进行跨源访问控制，从而使跨源数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch）使用 CORS，以降低跨源 HTTP 请求所带来的风险。

avatar
文章
阅读
粉丝