【芝士整理】网络请求相关

时间 2019-12-09

标签芝士整理网络请求相关栏目系统网络繁體版

原文原文链接

计算机网络结构

物理层

定义物理设备标准，起到传输比特流的做用。javascript

数据链路层

提供可靠的经过物理介质传输数据的方法。html

经过差错控制、流量控制方法将有差错的物理链路（物理链路容易受到干扰）变为无差错的数据链路java

将物理层的比特流数据封装成数据帧传递给上层，将上层的数据帧转换为比特流给物理层。node

提供MAC地址（物理地址），可做为局域网内一个网卡的惟一标识。ios

网络层

解决不一样子网间的通讯问题：逻辑寻址，规定不一样的信息交换方式，路由算法，链接服务。git

IP协议

网络上每个节点都有一个独立的逻辑地址——IP地址es6

IP协议负责将数据包传送到目的地，没有提供一种数据未传达之后的处理机制（这被认为是上层协议须要作的事情），是不可靠的协议。github

传输层

提供可靠的端到端的差错和流量控制，保证报文的正确传输web

UDP协议

没有创建链接，直接向对象发包，不可靠但快速高效。应用：ping命令、实时音视频通讯ajax

TCP协议

三次握手创建链接
发送方给接受方TCP数据报，而后等待对方的确认TCP数据报，若是没有，就从新发，若是有，就发送下一个数据报。
接受方等待发送方的数据报，若是获得数据报并检验无误，就发送ACK(确认)数据报，并等待下一个TCP数据报的到来。直到接收到FIN(发送完成数据报)
四次挥手停止链接

会话层

创建和管理应用程序之间的通讯，保证应用程序自动收发包和寻址

表示层

解释不一样系统之间的通讯语法

应用层

直接面向用户的程序或服务

HTTP协议

什么是HTTP协议？

基于TCP/IP协议基础的一个应用层协议，用于从Web服务器传输超文本到本地浏览器的传送协议，由请求和响应构成。

HTTP协议的特色

无状态：请求相互独立，通讯状态不被保存

HTTP报文的组成

HTTP报文包括请求报文和响应报文两大部分，其中请求报文由请求行（request line）、请求头（header）、空行和请求体四个部分组成。而响应报文由状态行、响应头部、空行和响应体四个部分组成。

HTTP请求方式

GET, HEAD, POST, PUT, DELETE,OPTIONS

HEAD：获取报头。

OPTIONS：获取请求资源的选项、需求或服务器支持，并不是资源请求。ajax请求跨域资源时，使用OPTIONS方法发送嗅探请求，以判断是否有对指定资源的访问权限。

GET和POST的区别

GET安全性低，会被缓存
GET请求在URL中显示参数，POST请求在send中传递参数

状态码

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

2xx：成功，操做被成功接收并处理

3xx：重定向，须要进一步的操做以完成请求

4xx：客户端错误，请求有语法错误或请求没法实现

5xx：服务端错误，服务器端错误--服务器未能实现合法的请求

200 请求正常处理
204 请求正常处理但没有资源返回
301永久性重定向
302 临时性重定向
304 指采用GET方法的请求报文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个首部）服务器端容许请求访问资源，但因发生请求未知足条件的状况后，直接返回304Modified
400 请求报文中有语法错误
401 表示未受权
403 请求被服务器拒绝
404 服务器上没法找到请求的资源
500 服务器在执行时发生错误
503 服务器暂时处于超负载或正在进行停机维护

请求API

Ajax

var xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
    xhr.open("POST","test.html",true);  
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
    xhr.send("fname=Henry&lname=Ford"); 
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }
    xhr.onerror = function (e) {
        console.log(e)
    }
}

readyState

0：未初始化，还没有调用open
1：已经调用open，还没有调用send
2：已经send，但还没有收到响应
3：已接收到部分响应
4：已收到全部响应

error事件

Network error，只有发生网络层的错误才会出发error事件，应用层的错误不会进入error

onload事件

当请求成功完成时触发，此时xhr.readyState=4

onabort事件

调用xhr.abort()后触发

withCredentials

在跨域请求中，客户端必须手动设置 xhr.withCredentials=true，且服务器端也必须容许亲贵能携带认证信息（即响应头中包含 Access-Control-Allow-Credentials:true），这样浏览器才会自动将 cookie加在 请求头中。
另外，要特别注意一点，一旦跨域请求可以携带认证信息，服务器端必定不能将Access-Control-Allow-Origin设置为*，而必须设置为请求页面的域名。

XMLHttpRequest的具体介绍

Fetch

Fetch API 基于Promise设计，fetch()返回一个Promise对象

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

Fetch原生支持率并不高，须要引入各类polyfill

因为 IE8 是 ES3，须要引入 ES5 的 polyfill: es5-shim, es5-sham

引入 Promise 的 polyfill: es6-promise

引入 fetch 探测库：fetch-detector

引入 fetch 的 polyfill: fetch-ie8

可选：若是你还使用了 jsonp，引入 fetch-jsonp

可选：开启 Babel 的 runtime 模式，如今就使用 async/await

Fetch polyfill 的基本原理是探测是否存在 window.fetch 方法，若是没有则用 XHR 实现。这也是 github/fetch 的作法，可是有些浏览器（Chrome 45）原生支持 Fetch，但响应中有中文时会乱码，老外又不太关心这种问题，因此我本身才封装了 fetch-detector 和 fetch-ie8 只在浏览器稳定支持 Fetch 状况下才使用原生 Fetch。这些库如今 天天有几千万个请求都在使用，绝对靠谱 ！

Fetch 常见坑

Fetch 请求默认是不带 cookie 的，须要设置 fetch(url, {credentials: 'include'})

服务器返回 400，500 错误码时并不会 reject，只有网络错误这些致使请求不能完成时，fetch 才会被 reject。