网络通信

2022-06-17

字数统计: 8k字 | 阅读时长≈ 34分

fetch API

语法

Fetch API 能够执行 XMLHttpRequest 对象的所有任务，

Fetch API 则必须是异步。

简单示例：

fetch()只有一个必需的参数 input。多数情况下，这个参数是要获取资源的 URL。这个方法返回一个期约：

let p = fetch('../resource/001.txt');
// 获取文本
p.then(res=>
    res.text()
).then(text=>{
    console.log('文本:',text);
})

响应状态

200 成功 | res.redirected 重定向为 ture 时状态码依然是200 不是 301

状态码在非 200~299 时，检查对象 res.ok属性 true 则请求成功

语法

1	fetch(url, options)

示例

post提交字符串

const response = await fetch(url, {
  method: 'POST',
  headers: {
    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
  },
  body: 'foo=bar&lorem=ipsum',
});

const json = await response.json();

提交表单数据

const form = document.querySelector('form');

const response = await fetch('/users', {
  method: 'POST',
  body: new FormData(form)
})

文件上传

const input = document.querySelector('input[type="file"]');

const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');

fetch('/avatars', {
  method: 'POST',
  body: data
});

直接上传二进制数据

// 将 Blob 或 arrayBuffer 数据放在body属性里面

let blob = await new Promise(resolve =>   
  canvasElem.toBlob(resolve,  'image/png')
);

let response = await fetch('/article/fetch/post/image', {
  method:  'POST',
  body: blob
});

参数配置

options 完整配置
{
  method: "GET",
  headers: {
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,
  referrer: "about:client",
  referrerPolicy: "no-referrer-when-downgrade",
  mode: "cors", 
  credentials: "same-origin",
  cache: "default",
  redirect: "follow",
  integrity: "",
  keepalive: false,
  signal: undefined,
}

Headers 对象

Headers 对象提供了以下方法，用来操作标头。

Headers.get()：根据指定的键名，返回键值。

Headers.has()：返回一个布尔值，表示是否包含某个标头。

Headers.set()：将指定的键名设置为新的键值，如果该键名不存在则会添加。

Headers.append()：添加标头。

Headers.delete()：删除标头。

Headers.keys()：返回一个遍历器，可以依次遍历所有键名。

Headers.values()：返回一个遍历器，可以依次遍历所有键值。

Headers.entries()：返回一个遍历器，可以依次遍历所有键值对（[key, value]）。

Headers.forEach()：依次遍历标头，每个标头都会执行一次参数函数。

Response 对象

Response对象根据服务器返回的不同类型的数据，提供了不同的读取方法。

response.text()：得到文本字符串。

response.json()：得到 JSON 对象。

response.blob()：得到二进制 Blob 对象。

response.formData()：得到 FormData 表单对象。

response.arrayBuffer()：得到二进制 ArrayBuffer 对象。

Stream 对象只能读取一次，读取完就没了。这意味着，上面五个读取方法，只能使用一个，否则会报错。

Response.clone()

创建Response对象的副本，实现多次读取

const response1 = await fetch('flowers.jpg');
const response2 = response1.clone();

const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();

image1.src = URL.createObjectURL(myBlob1);
image2.src = URL.createObjectURL(myBlob2);

Response.body 属性

Response.body属性是 Response 对象暴露出的底层接口，返回一个 ReadableStream 对象，供用户操作

// 分块读取内容，应用之一就是显示下载的进度

const response = await fetch('flower.jpg');
const reader = response.body.getReader();

// 通过请求头获取文件总大小
const totals = response.headers.get('Content-length');

let hasDone = 0;
while(true) {
    const {done, value} = await reader.read();

    if (done) {
      break;
    }
    hasDone += value.length;
    console.log(hasDone / totals)
}

参数

method：HTTP 请求的方法，POST、DELETE、PUT都在这个属性设置。
headers：一个对象，用来定制 HTTP 请求的标头。
body：POST 请求的数据体。

请求体内容必须是 Blob、BufferSource、FormData、URLSearchParams、ReadableStream 或 String 的实例

cache

cache属性指定如何处理缓存。可能的取值如下：

default：默认值，先在缓存里面寻找匹配的请求。

no-store：直接请求远程服务器，并且不更新缓存。

reload：直接请求远程服务器，并且更新缓存。

no-cache：将服务器资源跟本地缓存进行比较，有新的版本才使用服务器资源，否则使用缓存。

force-cache：缓存优先，只有不存在缓存的情况下，才请求远程服务器。

only-if-cached：只检查缓存，如果缓存里面不存在，将返回504错误。

mode

mode属性指定请求的模式。可能的取值如下：

cors：默认值，允许跨域请求。

same-origin：只允许同源请求。

no-cors：请求方法只限于 GET、POST 和 HEAD，并且只能使用有限的几个简单标头，不能添加跨域的复杂标头，相当于提交表单所能发出的请求。

credentials

credentials属性指定是否发送 Cookie。可能的取值如下：

same-origin：默认值，同源请求时发送 Cookie，跨域请求时不发送。

include：不管同源请求，还是跨域请求，一律发送 Cookie。

omit：一律不发送。

跨域请求发送 Cookie，需要将credentials属性设为include。

1
2
3

fetch('http://another.com', {
credentials: "include"
});

signal

signal属性指定一个 AbortSignal 实例，用于取消fetch()请求，详见下一节。

keepalive

keepalive属性用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。

一个典型的场景就是，用户离开网页时，脚本向服务器提交一些用户行为的统计信息。这时，如果不用keepalive属性，数据可能无法发送，因为浏览器已经把页面卸载了。

window.onunload = function() {
fetch('/analytics', {
 method: 'POST',
 body: "statistics",
 keepalive: true
});
};

redirect

redirect属性指定 HTTP 跳转的处理方法。可能的取值如下：

follow：默认值，fetch()跟随 HTTP 跳转。

error：如果发生跳转，fetch()就报错。

manual：fetch()不跟随 HTTP 跳转，但是response.url属性会指向新的 URL，response.redirected属性会变为true，由开发者自己决定后续如何处理跳转。

integrity

integrity属性指定一个哈希值，用于检查 HTTP 回应传回的数据是否等于这个预先设定的哈希值。

比如，下载文件时，检查文件的 SHA-256 哈希值是否相符，确保没有被篡改。

1
2
3

fetch('http://site.com/file', {
integrity: 'sha256-abcdef'
});

referrer

referrer属性用于设定fetch()请求的referer标头。

这个属性可以为任意字符串，也可以设为空字符串（即不发送referer标头）。

1
2
3

fetch('/page', {
referrer: ''
});

referrerPolicy

referrerPolicy属性用于设定Referer标头的规则。可能的取值如下：

no-referrer-when-downgrade：默认值，总是发送Referer标头，除非从 HTTPS 页面请求 HTTP 资源时不发送。

no-referrer：不发送Referer标头。

origin：Referer标头只包含域名，不包含完整的路径。

origin-when-cross-origin：同源请求Referer标头包含完整的路径，跨域请求只包含域名。

same-origin：跨域请求不发送Referer，同源请求发送。

strict-origin：Referer标头只包含域名，HTTPS 页面请求 HTTP 资源时不发送Referer标头。

strict-origin-when-cross-origin：同源请求时Referer标头包含完整路径，跨域请求时只包含域名，HTTPS 页面请求 HTTP 资源时不发送该标头。

unsafe-url：不管什么情况，总是发送Referer标头。

中断请求

// Fetch API 支持通过 AbortController/AbortSignal 对中断请求。

let abortController = new AbortController(); 

fetch('../resource/test.pdf', { signal: abortController.signal }) 

.catch(() => console.log('中断请求 aborted!')); 

// 10 毫秒后中断请求 

setTimeout(() => abortController.abort(), 10); 

// 已经中断

fetch 不能实现上传进度这部分

完整示例

要发送简单的HTTP请求，使用fetch()只需三步：
1.　调用fetch()，传入要获取内容的URL；
2.　在HTTP响应开始到达时取得第1步异步返回的响应对象，然后调用这个响应对象（Response）的某个方法，读取响应体；
3.　取得第2步异步返回的响应体，按需要处理它

// 获取文本
p.then(res=>
    res.text()
).then(text=>{
    console.log('文本:',text);
})

// 使用 await
async function isServiceBody() {
    let res = await fetch('../resource/001.txt');
    let body = await res.text();
}

fetch 配置参数
	-第一个参数用于指定URL的字符串或URL对象
	-第二个参数用于提供额外选项，包括请求头部

	{
            //请求体内容 必须是 Blob、BufferSource、FormData、URLSearchParams、ReadableStream 或 String 的 实例
            body:'Formdata',
            // 控制浏览器缓存交互,要跟踪缓存重定向，redirect属性必须为 'follow'
            cache:'Default',//no-store、reload、no-cache、force-cache、only-if-cached
            // 用于指定cookie
            credentials:'omit',//不发送， same-origin:同源时才发送；include:无论是否跨源都发送
            // 用于指定请求头 必须是 Headers 对象实例或包含字符串格式键/值对的常规对象
            headers: new Headers({"Content-Type": "application/json"}),
            // 强制资源完整
            integrity:false,
            //指定允许请求超出页面生命周期（如页面卸载后）
            keeplive:false,
            // 指定请求方法 
            method:'GET',//POST、PUT、PATCH、DELETE、OPTIONS、CONNECT、TARCE
            // 指定请求模式，决定跨源请求响应是否有效
            // 必须是下列字符串值之一 
            //  cors：允许遵守 CORS 协议的跨源请求。响应是“CORS 过滤的响应”，意思是响应中可以访问 的浏览器头部是经过浏览器强制白名单过滤的 
            //  no-cors：允许不需要发送预检请求的跨源请求（HEAD、GET 和只带有满足 CORS 请求头部的 POST）。响应类型是 opaque，意思是不能读取响应内容 
            //  same-origin：任何跨源请求都不允许发送 
            //  navigate：用于支持 HTML 导航，只在文档间导航时使用。基本用不到 在通过构造函数手动创建 Request 实例时，默认为 cors；否则，默认为 no-cors
            mode:'no-cors',
            //用于指定如何处理重定向响应（状态码为 301、302、303、307 或 308）
            redirect:'follow',//跟踪重定向请求；error:重定向请求报错；manual:manual：不跟踪重定向请求，而是返回 opaqueredirect 类型的响应，同时仍然暴露期望的重 定向 URL。允许以手动方式跟踪重定向
            // 指定referrer头部内容
            //  no-referrer：以 no-referrer 作为值 
            //  client/about:client：以当前 URL 或 no-referrer（取决于来源策略 referrerPolicy）作 为值 
            //  <URL>：以伪造 URL 作为值。伪造 URL 的源必须与执行脚本的源匹配 
            // 默认为 client/about:client
            referrer:'client/about:client',
            //用于指定 HTTP 的 Referer 头部
            referrerPolicy:'no-referrer-when-downgrade',//no-referrer、no-referrer-when-downgrade、origin、same-origin、strict-origin、origin-when-cross-origin、strict-origin-when-cross-origin、unsafe-url

            //用于支持通过 AbortController 中断进行中的 fetch()请求
            signal:'',//必须是 AbortSignal 的实例

        }



	-只传递一个 Request 对象
    	//Request.bodyUsed为true(请求体已被读取)情况不能再次使用 
        //clone() 克隆request对象 克隆否则会报错
        //用于创建一个与已知request对象一样的request对象，同时还可以再设置options覆盖同名值
    	let req = new Request('http://127.0.0.1:5000/test/poststh',{
            method:'POST',
            body:{data:'数据'},
            headers: new Headers({'Content-type': 'application/json'})
        });
        fetch(req.clone())...
    
Header
	Response对象的headers属性是一个Headers对象。
    使用它的has()方法可以测试某个头部是否存在，
    使用它的get()方法可以取得某个头部的值。
    HTTP头部的名字是不区分大小写的，因此可以给这两个方法传入小写甚至混合大小写形式的头部名。
    Headers对象也是一个可迭代对象
    
处理响应对象
	-json()
	-text()
	-arrayBuffer()
		可以基于得到的ArrayBuffer创建一个定型数组或一个DataView对象，然后再读取二进制数据
	-blob 
		可以通过URL.createObjectURL()或者使用基于事件的FileReader API以字符串或ArrayBuffer的形式异步获取它的内容
	-fromData()
		如果Response响应体是以“multipart/form-data”格式编码的，应该使用这个方法。

Response对象
	它的body属性是一个ReadableStream对象。
	如果已经调用了text()或json()等读取、解析和返回响应体的方法，那么bodyUsed属性会变成true，表示body流已经读完了。如果bodyUsed属性是false，那就意味着该流尚未被读取。此时，可以在response.body上调用getReader()获取流读取器对象，然后通过这个读取器对象的read()方法异步从流中读取文本块。这个read()方法返回一个期约，解决为一个带有done和value属性的对象。如果响应体整个都读完了或者流被关闭了，done会变成true。而value要么是下一个Uint8Array块，要么会在没有更多块时变成undefined。
    
   流式访问fetch()请求的响应体
   eg:
	/*
	*一个流式读取 fetch()
	*/

	async function streamBody(res, progress, processChunk) {
        // 期待接收多少字节， 或者如果没有头部就是NaN
        let expectedBytes = parseInt(res.headers.get('Content-Length'));
        let bytesRead = 0;// 已经接收了多少字节
        let reader = res.body.getReader();// 通过这个函数读取字节
        let decoder = new TextDecoder('utf-8');// 用于将字节转换为文本
        let body = '';// 已经读取的文本
        
        while(true) {
            let {done, value} = await reader.read();// 读取一块数据
            if(value) {
                if(processChunk) {// 如果传了这个回调
                    let processed = processChunk(value);// 则用回调处理数据
                    if(processed) {
                        body += processed
                    }
                } else {// 否则把字节转换为文本
                    body += decoder.decode(value, {stream: true});
                }
                
                if(progress) {// 如果传递了进度回调
                    bytesRead += value.length;
                    // 则调用它报告的进度
                    progress(bytesRead, bytesRead/expectedBytes);
                }
            }
            // 如果这是最后一块
            if(done) {
                break; //退出循环
            }
        }
        return body;// 返回累积响应文本
    }
        
 中断请求
 	-AbortController

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API</title>
</head>
<body>
    
    <!-- 
        Fetch API 能够执行 XMLHttpRequest 对象的所有任务，
        Fetch API 则必须是异步。 
    -->

    <script>
    // 1、请求
        // fetch()只有一个必需的参数 input。多数情况下，这个参数是要获取资源的 URL。这个方法返回 一个期约：
        
        let p = fetch('../resource/001.txt');
        // 获取文本
        p.then(res=>
            res.text()
        ).then(text=>{
            console.log('文本:',text);
        })
        
        // 使用 await
        async function isServiceBody() {
            let res = await fetch('../resource/001.txt');
            let body = await res.text();
        }
        
    //响应状态 res.status 
        //  200 成功  | res.redirected 重定向为 ture时 状态码 依然是200 不是 301
        // 状态码在 非 200~299 时，检查对象 res.ok属性 true 则请求成功

    // 自定义选项
        fetch('../resource/001.txt',{
            //请求体内容 必须是 Blob、BufferSource、FormData、URLSearchParams、ReadableStream 或 String 的 实例
            body:'Formdata',
            // 控制浏览器缓存交互,要跟踪缓存重定向，redirect属性必须为 'follow'
            cache:'Default',//no-store、reload、no-cache、force-cache、only-if-cached
            // 用于指定cookie
            credentials:'omit',//不发送， same-origin:同源时才发送；include:无论是否跨源都发送
            // 用于指定请求头 必须是 Headers 对象实例或包含字符串格式键/值对的常规对象
            headers:'',
            // 强制资源完整
            integrity:false,
            //指定允许请求超出页面生命周期（如页面卸载后）
            keeplive:false,
            // 指定请求方法 
            method:'GET',//POST、PUT、PATCH、DELETE、OPTIONS、CONNECT、TARCE
            // 指定请求模式，决定跨源请求响应是否有效
            // 必须是下列字符串值之一 
            //  cors：允许遵守 CORS 协议的跨源请求。响应是“CORS 过滤的响应”，意思是响应中可以访问 的浏览器头部是经过浏览器强制白名单过滤的 
            //  no-cors：允许不需要发送预检请求的跨源请求（HEAD、GET 和只带有满足 CORS 请求头部的 POST）。响应类型是 opaque，意思是不能读取响应内容 
            //  same-origin：任何跨源请求都不允许发送 
            //  navigate：用于支持 HTML 导航，只在文档间导航时使用。基本用不到 在通过构造函数手动创建 Request 实例时，默认为 cors；否则，默认为 no-cors
            mode:'no-cors',
            //用于指定如何处理重定向响应（状态码为 301、302、303、307 或 308）
            redirect:'follow',//跟踪重定向请求；error:重定向请求报错；manual:manual：不跟踪重定向请求，而是返回 opaqueredirect 类型的响应，同时仍然暴露期望的重 定向 URL。允许以手动方式跟踪重定向
            // 指定referrer头部内容
            //  no-referrer：以 no-referrer 作为值 
            //  client/about:client：以当前 URL 或 no-referrer（取决于来源策略 referrerPolicy）作 为值 
            //  <URL>：以伪造 URL 作为值。伪造 URL 的源必须与执行脚本的源匹配 
            // 默认为 client/about:client 设置为空字符串，那么请求就会省略“Referer”头部。
            referrer:'client/about:client',
            //用于指定 HTTP 的 Referer 头部
            referrerPolicy:'no-referrer-when-downgrade',//no-referrer、no-referrer-when-downgrade、origin、same-origin、strict-origin、origin-when-cross-origin、strict-origin-when-cross-origin、unsafe-url

            //用于支持通过 AbortController 中断进行中的 fetch()请求
            signal:'',//必须是 AbortSignal 的实例

        }).then(res=>{
            console.log('成功了',res);
        },err=>{
            console.log('失败了');
        })

    // 常见fetch请求模式

        // 发送json数据 （request payload）
        let payload = JSON.stringify({ name:'www',password:123123 }); 
        let jsonHeaders = new Headers({ 'Content-Type': 'application/json' }); 
        fetch('http://127.0.0.1:5000/signin', { 
            method: 'POST', // 发送请求体时必须使用一种 HTTP 方法 
            body: payload, //负载内容
            headers: jsonHeaders //请求头
        });

        // 请求体中传参 (formData)
        let payload1 = 'name=www&password=12313'; 
        let paramHeaders = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' });
        fetch('http://127.0.0.1:5000/signin', { 
            method: 'POST', // 发送请求体时必须使用一种 HTTP 方法 
            body: payload1, 
            headers: paramHeaders 
        });

    // formData数据格式 发送文件
        let imageFormData = new FormData(); 
        let imageInput = document.querySelector("input[type='file']");
        // 多文件
        // let imageInput = document.querySelector("input[type='file'][multiple]"); 
        // for (let i = 0; i < imageInput.files.length; ++i) { 
        //     imageFormData.append('image', imageInput.files[i]); 
        // } 
        // fetch('/img-upload', { method: 'POST', body: imageFormData });

    // 加载blob文件
        fetch('http://127.0.0.1:5000/images/girl.jpg')
        .then((res) => res.blob()) 
        .then((blob) => { 
            let img = new Image();
            img.onload = function(){
                document.body.append(this);
                URL.revokeObjectURL(this.src);
            }
            img.src = URL.createObjectURL(blob);
        });

        // 如果代码不需要访问响应，也可以发送 no-cors 请求。此时响应的 type 属性值为 opaque，
        // 因此无法读取响应内容。这种方式适合发送探测请求或者将响应缓存起来供以后使用。
        fetch('https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg', { mode: 'no-cors' }) 
        .then((res) => console.log(res));

    // 中断请求
        // Fetch API 支持通过 AbortController/AbortSignal 对中断请求。
        let abortController = new AbortController(); 
        fetch('../resource/test.pdf', { signal: abortController.signal }) 
        .catch(() => console.log('中断请求 aborted!')); 
        // 10 毫秒后中断请求 
        setTimeout(() => abortController.abort(), 10); 
        // 已经中断


    // Headers 对象
        // Headers 与 Map 类型都有 get()、set()、has()和 delete() 等实例方法，
        // Headers特性 初始化时可以使用键值对形式，Map不行
        let seed = {foo:'foo'};
        let h = new Headers(seed);
        // 给头部字段添加多个值 【值中存在汉字会报错，需进行编码】
        h.append('foo','foo1');
        // Uncaught TypeError: Failed to execute 'append' on 'Headers': Value is not a valid ByteString.
        console.log('新建的Headers：',h.get('foo'));

    // Request对象
        // request(URL,options) 其第二个参数与fetch一样，不设置则是默认值
        let req = new Request('http://127.0.0.1:5000/test/poststh',{
            method:'POST',
            body:{data:'数据'},
            headers:h
        });
        console.log('request对象：',req);
        //clone() 克隆request对象  bodyUsed为true(请求体已被读取)情况不能克隆否则会报错
        //用于创建一个与已知request对象一样的request对象，同时还可以再设置options覆盖同名值
        
        // req.text(); // 设置 bodyUsed 为 true
        console.log(req.bodyUsed);

        let req1 = req.clone();

        console.log('clone 的 Headers：',req1);

        // 使用 bodyUsed为true(请求体已被读取)情况不能使用否则会报错
        // 此时第二个参数依然有效，并覆盖Request对象中的配置
        fetch(req1,{});
        console.log(req1.bodyUsed);//true
        // 通过fetch()使用 Request 会标记 bodyUsed 为 true 
        // 要想相同Request对象多次使用fetch(),就必须再请求前克隆它
        //etch(req1.clone(),{});
    
    // Response(body,init)对象
        let res = new Response('body content',{
            headers:{'token':'abcdefg'},
            status:200,
            statusText:'Http response String'
        });
        console.log('Response对象：',res);

        // response 实例也有 clone()方法，与request 类似
        // 有响应体(body) 的 response 对象 只能读取一次

    //body混入
        fetch('../images/b1.jpg')
        // 获取响应文本
        // .then(res=>res.text())
        // .then(text=>console.log(text)) 
        
        // 获取响应json文本
        // .then(res=>res.json())
        // .then(json=>console.log(json)) 

        // 获取响应blob文本
        // .then(res=>res.blob())
        // .then(blob=>console.log(blob)) 

        // 获取响应ArrayBuffer数据
        // .then(res=>res.arrayBuffer())
        // .then(buf=>console.log(new Int8Array(buf)) )
        
        // 一次性流 上述方法调用时会加锁，再次调用就会加锁失败
        .then(res=>{
            res.blob();
            res.blob();//TypeError: Failed to execute 'blob' on 'Response': body stream is locked
        })
    </script>

</body>
</html>

EventSource

这是一种服务器向客户端发送信息的方案。
	这种让服务器向客户端发送消息的技术效率非常高（尽管服务器端的成本可能较高，因为服务器必须对它的所有客户端都维护一个活动连接）。

要创建与服务器间的这种长时间存在的请求连接，只要向EventSource()构造函数传入一个URL即可。当服务器将（适当格式化的）数据写入这个连接时，EventSource对象会将它们转换为客户端能够监听到的事件

eg: 
	let ticker = new EventSource('URL');
	ticker.addEventListener('bid', (e)=> {
        displayNewBid(e.data)
    })

WebSocket

	WebSocket API是一个复杂、强大的网络协议对外暴露的简单接口。WebSocket允许JavaScript代码在浏览器中与服务器方便地交换文本和二进制消息。与服务器发送事件（SSE）类似，客户端必须建立连接，而连接一旦建立，服务器就可以异步向客户端发送消息。与SSE不同，WebSocket支持二进制消息，而且消息可以双向发送，而不仅仅是从服务器向客户端发消息。
    
    
1、创建
	let socket = new WebSocket("wss://example.com/stockticker");
	
    这个套接口对象的readyState属性表明了当前的连接状态。这个属性可能包含下列值：
        -WebSocket.CONNECTING
            WebSocket正在连接。
        -WebSocket.OPEN
            WebSocket已经连接，可以通信了。
        -WebSocket.CLOSING
            WebSocket正在关闭。
        -WebSocket.CLOSED
            WebSocket已经关闭，不能再通信了。初始连接失败时也是这个状态。
2、 监听事件
	-状态从CONNECTING转变为OPEN时，它会触发“open”事件
    	onopend
     -如果WebSocket连接发生了协议错误或其他错误，WebSocket对象会触发“error”事件
		onerror
     -当连接状态变成CLOSED时，WebSocket对象会触发“close”事件
		onclose
        
2、接发消息
	向服务器发送消息
    	-send()
			send()方法接收一个消息参数，可以是字符串、Blob、ArrayBuffer、定型数组或DataView对象。
            
    接收服务端消息
    	-message
            socket.onmessage = function(e) {
                ...
            }
                
    事件对象是MessageEvent的实例，其data属性包含服务器的消息。
    如果服务器发送了UTF-8编码的文本，event.data就是保存该文本的字符串。
    如果服务器发送了二进制格式的消息，则data属性（默认）是表示该数据的Blob对象。
    如果你希望接收ArrayBuffer而不是Blob，可以把WebSocket对象的binaryType属性设置为arraybuffer。
    
[拓展]
    vue 前端vue使用stomp.js、sock.js完成websocket

工作者线程

	Worker API有两部分。一部分是Worker对象，另一部分是WorkerGlobalScope。前者是这个线程的外在部分，后者则是线程的内在部分
	
	
1、创建work对象
	要创建新的工作线程，调用Worker()构造函数，传入一个URL，这个URL用于指定线程要执行的JavaScript代码：
    //如果传入的是绝对URL，则必须与包含文档同源（协议、主机和端口都相同）。
    let dataCUruncher = new Worker('untils/cruncher.js', {
        name: '',// 这个属性的值就会成为工作线程中全局对象的name属性的值
        type: 'module',// 表示应该将当前代码作为模块来解释，并允许使用import声明。
    });
2、线程外
	创建Worker对象后，可以使用postMessage()方法向工作线程发送数据。传给postMessage()的值会使用结构化克隆算法被复制，得到的副本会通过消息事件发送给工作线程：
	dataCUruncher.postMessage("/api/data/to/crunch");

	//通过监听Worker对象的“message”事件，可以从工作线程接收消息：
    
    dataCUruncher.onmessage = function(e) {
        let stats = e.data;// 消息保存在事件对象的data属性中
        console.log(`Avarage: ${sstats.mean}`)
    }
	// 用于强制停止工作线程。
	dataCUruncher.terminate()
3、线程内部 （URL指定的是一个JavaScript代码文件）
	这个新执行环境中的全局对象是一个WorkerGlobalScope对象。
	-WorkerGlobalScope比核心JavaScript全局对象多一些东西，但又比客户端中完整的Window对象少一些东西。
    -WorkerGlobalScope对象也有postMessage()方法和onmessage事件处理程序，只是方向与Worker对象上的恰好相反。
    -close()函数可以让工作线程终止自己，效果与调用Worker对象的terminate()方法一样
    -最后，WorkerGlobalScope对象还包含重要的客户端JavaScript API，比如Console对象、fetch()函数和IndexedDB API。WorkerGlobalScope也包含Worker()构造函数，这意味着工作线程也可以创建自己的工作线程。
    
    -WorkerGlobalScope定义了importScripts()全局函数，所有工作线程都可以使用：
    	importScripts()方法接收多个URL，并按顺序同步加载和执行这些文件
        // 在开始之前，加载需要的辅助程序
        // 相对URL 会传递给Worker()构造函数的URL（而不是相对于包含文档）
        eg:
		importScript("utils/Histogram.js","utils/BitSet.js")

		注意，截止到2020年初，Chrome是唯一真正在工作线程中支持模块和import声明的浏览器。
       
        
    -如果工作线程中出现了异常，而且没有被catch子句捕获，则会在全局对象上触发“error”事件。如果这个事件有处理程序，而且处理程序调用了事件对象的preventDefault()，则错误会停止传播。否则，“error”事件会在Worker对象上触发。如果这里调用了preventDefault()，则传播停止。否则，开发者控制台会打印出错误消息，并调用Window对象的onerror处理程序
        // 线程内
        self.onerror = function(e) {
            console.log('Error in worker at in')
            e.preventDefault();
        }
		// 线程外
		worker.onerror = function(e) {
            console.log('Error in worker at in')
            e.preventDefault();
        }


-postMessage()、MessagePort和MessageChannel
    Worker对象的postMessage()方法和工作线程内部的全局postMessage()函数，都是通过调用在创建工作线程时一起创建的一对MessagePort（消息端口）对象的postMessage()方法来实现通信的。客户端JavaScript无法直接访问这两个自动创建的MessagePort对象，但可以通过MessageChannel()构造函数创建一对新的关联端口
    let channel = new MessageChannel;// 创建新信道
	let myPort  = channel.port1;    //	两个互相连接的端口
	let yourPort = channel.port2;

	myPort.postMessage('Can you hear me?');// 在一个端口发送消息
	yourPort.onmessage = (e) => console.log(e.data);// 可以在另一个端口收到

	通过 MessageChannel 创建多个 信道 并可以传送到线程内并使用
    

    
 -页面的 postMessage 方法
 	Window对象上的postMessage()方法与工作线程的postMessage()方法有一点不同。
    第一个参数仍然是可以通过结构化克隆算法复制的任意消息。但包含要转移而非复制对象的第二个可选参数变成了可选的第三个参数。
    window.postMessage(结构化克隆对象, 源, 转移的对象)
    这第二个参数应该是一个源（协议、主机名和可选的端口号），用于指定你希望谁接收这条消息。
    如果传入“https://good.example.com”作为第二个参数，但把消息发送到了一个内容来源为“https://malware.example.com”的窗口，那么你发送的消息将不会被派送。如果你想把消息发送给任意来源的窗口，可以传“”通配符作为第二个参数。

	在一个窗口或<iframe>中运行的JavaScript代码可以通过定义窗口的onmessage属性或通过调用addEventListener()为“message”事件注册处理程序，接收发送到该窗口或窗格的消息。
    与工作线程类似，在接收到窗口的“message”事件时，事件对象的data属性是发送过来的消息。不过，除此之外，派送到窗口的“message”事件也定义了source和origin属性。source属性是发送事件的Window对象，因此可以使用event.source.postMessage()发送回信。origin属性则是该窗口中内容的源。这个源是消息发送方无法伪造的，因此在收到“message”事件时，通常应该先验证发送消息的源的合法性。
    
eg:
    父页面：
        button class="btn-send1">主信道发送</button>
        <button class="btn-send2">端口发送</button>
        <button class="btn-send3">页面发送</button>
        <iframe src="http://127.0.0.1:5503/workers/ifram1.html" width="100%" height="50%" frameborder="1" id="test" name="test"></iframe>

        <script>
            let channel = new MessageChannel;// 创建新信道
            let myPort  = channel.port1;    //	两个互相连接的端口
            let yourPort = channel.port2;

            let worker = new Worker('./worker.js', {name: 'worker1', type:'module'});
            worker.postMessage({command:'you can eat', value: yourPort}, [yourPort])
            worker.onmessage = function(e) {
                console.log('主信道收到回复：', e);
            }
            worker.onerror = function(e) {
                e.preventDefault();
                console.log('捕捉到错误：', e);
            }


            myPort.postMessage('Can you hear me?');// 在一个端口发送消息
            myPort.onmessage = function(e) {
                console.log('端口myPort:收到', e);
            }

            // 主信道发送
            let btn1 = document.querySelector('.btn-send1');
            let btn2 = document.querySelector('.btn-send2');
            let btn3 = document.querySelector('.btn-send3');
            btn1.onclick = function() {
                worker.postMessage('主信道消息')
            }
            btn2.onclick = function() {
                myPort.postMessage('端口消息')
            }

            // 
            window.onload = function() {
                // let doc = window.frames['test'].document;
                let doc = document.getElementById('test').contentDocument;
                let win = document.getElementById('test').contentWindow;
                let ps = doc.querySelector('p')
                btn3.onclick = function() {
                    win.postMessage("来自postmasage");
                }

            }
            window.addEventListener('message',e=>{
                console.log('父级表示收到：',e.data);
            })

        </script>
子页面
	<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>iframe</title>
    </head>
    <body>
        <p>我是iframe页面</p>
        <script>
            window.addEventListener('message',e=>{
                console.log('iframe页面收到消息：',e);
                e.source.postMessage('儿子收到了消息并回复了')
            })
            console.log('子页面加载完毕');
        </script>
    </body>
    </html>

work.js

// 转移进来的端口信道
let port2 = null;
function initPort2(port2) {
    port2.onmessage = function(e) {
        console.log('端口信道收到消息：', e.data);
        port2.postMessage('端口信道收到:over over')
    }
}


self.onmessage = function(e) {
    console.log('收到：', e.data);
    self.postMessage('收到：over over')
    if(!port2 && e.data.value) {
        port2 = e.data.value;
        initPort2(port2)
    }
}
self.onerror = function(e) {
    console.log('内部阻止了错误事件传播', e);
}

ajax 发送 delete, put 请求

1、put 请求

$.ajax({
    type: "POST",
    url: that.api.carInfoParameter,
    data: {...sendData, id: data.id,_method: 'PUT'},
    success: (res)=> {
        showTips(res.data);
        that.table01 && that.table01.reload();
    }
})

2、delete 请求

$.ajax({
    type: "POST",
    url: that.api.carInfoParameter + `/${data.id}`,
    data: "&_method=DELETE",
    success: (res)=> {
        showTips(res.data);
        if (/成功/g.test(res.data)) {
            that.table01 && that.table01.reload();
        }
    }
})

参数序列化

export const getParamsToString = (obj) => {
  let str = '';
  for (const key in obj) {
    str += `${key}=${obj[key]}&`;
  }
  return str.substr(0, str.length - 1);
};

export const getParamsToString1 = (obj) => {
  let str = '';
  for (const key in obj) {
    str += `${key}=${encodeURIComponent(obj[key])}&`;
  }
  return str.substr(0, str.length - 1);
};

本文作者： 王不留行
本文链接： https://wyf195075595.github.io/2022/06/17/programming/javascript/网络/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！