XMLHttpRequest—>Promise
XMLHttpRequest.open()
初始化 HTTP 请求参数
语法
open(method, url, async, username, password)
method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。
( 大小写不敏感。
POST：用"POST"方式发送数据,可以大到4MB
GET：用"GET"方式发送数据,只能256KB
如果请求带有参数的化实用POST方式，POST方式将参数放置在页面的隐藏控件内
没有参数使用GET方式
对于请求的页面在中途可能发生更改的，也最好用POST方式)
url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。浏览器自己是可以发起跨域请求的（如a标签、img标签、form表单等），但Javascript不能去CORS跨域获取资源（如ajax）
async 一个可选的布尔参数，表示是否异步执行操作，默认为true异步。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。
如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。
username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。
说明
这个方法初始化请求参数以供 send() 方法稍后使用。它把 readyState 设置为1，删除之前指定的所有请求头部，以及之前接收的所有响应头部，
并且把 responseText、responseXML、status 以及statusText 参数设置为它们的默认值。
当 readyState 为 0 的时候（当 XMLHttpRequest 对象刚创建或者abort() 方法调用后）以及当 readyState 为 4时（已经接收响应时），
调用这个方法是安全的。
当针对任何其他状态调用的时候，open() 方法的行为是为指定的。
除了保存供 send() 方法使用的请求参数，以及重置 XMLHttpRequest 对象以便复用，open() 方法没有其他的行为。
要特别注意，当这个方法调用的时候，实现通常不会打开一个到 Web 服务器的网络连接。
XMLHttpRequest异步请求。案例1
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>XMLHttpRequest异步请求</title>
8
9 <c>//通过XMLHttpRequest对象，异步请求</c>
10 <!-- 容器 -->
11 <img id="img">
12
13 <c>//在rep返回之后，再发送req_2请求</c>
14 <!-- 容器2 -->
15 <img id="img_2">
16 </head>
17
18 <body>
19 <script>
20 //const 声明一个只读的常量，一旦声明，常量的值就不能改变。
21
22 //创建 XMLHttpRequest对象
23 const rep = new XMLHttpRequest();
24
25 //https://acg.toubiec.cn/random.php 写真与二次元
26 //API - 樱次元https://www.yingciyuan.cn/
27 //https://acg.toubiec.cn随机二次元图片
28 //https://www.dmoe.cc/随机二次元图片API-樱花
29 //韩小韩API接口站https://api.vvhan.com/api/acgimg一个随机二次元图片接口
30 const url = "https://api.vvhan.com/api/acgimg";
31
32 // 再次声明-----------------------
33 const url_2 = "https://acg.toubiec.cn/random.php";
34 const rep_2 = new XMLHttpRequest();
35
36 // 获得dom元素
37 const img_2 = document.querySelector('#img_2');
38 const img = document.querySelector('#img');
39
40 // 初始rep-----------------------------------------------------------------
41 //以get的方式，向url发送，异步请求
42 rep.open('GET', url);
43
44 //请求的格式为图片格式
45 rep.responseType = 'blob';
46
47 //onload监听器，事件在对象被加载后发生
48 rep.onload = function () {
49 //如果请求对象.的状态码为200
50 if (rep.status === 200) {
51 console.log('rep对象')
52 //修改img的是src链接
53 img.src = url;
54
55 //在rep返回之后，再次发送req_2请求--------------------------------------
56 rep_2.send();
57
58 } else {
59 //否则返回失败
60 console.log('失败');
61 }
62 }
63 // onerror监听器，监听链接问题
64 rep.onerror = function () {
65 console.log('network error网络错误');
66 }
67 // rep对象，发送请求
68 rep.send();
69
70
71 // 初始化，rep_2 -----------------------------------------------------------------
72 //以get的方式，向url发送请求
73 rep_2.open('GET', url);
74
75 //请求的格式为图片格式
76 rep_2.responseType = 'blob';
77
78 //onload页面渲染成功返回一个回调函数
79 rep_2.onload = function () {
80 //如果请求对象.的状态码为200
81 if (rep_2.status === 200) {
82 console.log('rep_2对象')
83 //修改img的是src链接
84 img_2.src = url_2;
85 } else {
86 //否则返回失败
87 console.log('失败');
88 }
89 }
90 // onerror监听器，监听链接问题
91 rep_2.onerror = function () {
92 console.log('network error网络错误');
93 }
94 </script>
95 </body>
96
97 </html>
Promise封装函数。案例2
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Promise</title>
8
9 <c>//通过Promise封装函数，发送异步请求</c>
10 <!-- 容器 -->
11 <img id="img">
12
13 <c>//通过Promise封装函数，再次发送请求req_2</c>
14 <!-- 容器2 -->
15 <img id="img_2">
16
17 </head>
18
19 <body>
20 <script>
21 //const 声明一个只读的常量，一旦声明，常量的值就不能改变。
22 //https://acg.toubiec.cn/random.php 写真与二次元
23 //API - 樱次元https://www.yingciyuan.cn/
24 //https://acg.toubiec.cn随机二次元图片
25 //https://www.dmoe.cc/随机二次元图片API-樱花
26 //韩小韩API接口站https://api.vvhan.com/api/acgimg一个随机二次元图片接口
27 const url = "https://api.vvhan.com/api/acgimg";
28 const url_2 = "https://cdn.jsdelivr.net/gh/uxiaohan/GitImgTypecho/Acg/api.vvhan.com[217].jpg"
29
30 // 获得dom元素
31 const img = document.querySelector('#img');
32 const img_2 = document.querySelector('#img_2');
33
34 //封装一个功能函数,参数传入。
35 function p(img, url) {
36
37 /*
38 Prminse在声明时候就被运行了。接受一个回调函数，有两个参数resolve, reject
39 Prminse作用把内部的 异步操作代码 包装起来。留出新的接口 方式通过resolve, reject。
40
41 流程原理：
42 等待Prminse内部的异步代码运行完成，触发事情，获得回调函数之后，返回resolve, reject。
43 resolve结果传入then(返回一个回调函数)
44 reject结果传入catch(返回一个回调函数)
45 */
46 new Promise((resolve, reject) => {
47
48 //创建 XMLHttpRequest对象
49 const rep = new XMLHttpRequest();
50
51 //以get的方式，向url发送，异步请求
52 rep.open('GET', url);
53
54 //请求的格式为图片格式
55 rep.responseType = 'blob'; // then()会返回一个 Blob对象
56
57 //onload监听器，事件在对象被加载后发生
58 rep.onload = function () {
59 //如果请求对象.的状态码为200
60 if (rep.status === 200) {
61 //修改img的是src链接
62 img.src = url;
63
64 console.log('//返回rep响应的结果')
65 return resolve(rep.response);
66 } else {
67 //否则返回失败
68 console.log('失败');
69 //返回 失败结果
70 return reject(Error('failed失败'))
71
72 }
73 }
74
75 // onerror监听器，监听链接问题
76 rep.onerror = function () {
77 console.log('network error网络错误');
78
79 //依然返回错误
80 return reject(Error('network error网络错误'))
81 }
82 // rep对象，发送请求
83 rep.send();
84
85 })
86 .then((res) => {
87 console.log(res)
88 })
89 .catch((err) => {
90 console.log(err)
91 });
92 }
93
94 // 函数的调用
95 // 获得一张图片
96 p(img, url);
97 // 再次获得一张图片
98 p(img_2, url_2);
99 </script>
100
101 </body>
102
103 </html>
分析Promise如何then()衔接。案例3
1 <!--
2 分析Promise如何then()衔接
3 -->
4 <!DOCTYPE html>
5 <html lang="en">
6
7 <head>
8 <meta charset="UTF-8">
9 <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 <title>分析Promise如何then()衔接</title>
11
12 <c>//通过Promise封装函数，发送异步请求</c>
13 <!-- 容器 -->
14 <img id="img">
15
16 <c>//通过Promise封装函数，再次发送请求req_2</c>
17 <!-- 容器2 -->
18 <img id="img_2">
19
20 </head>
21
22 <body>
23 <script>
24 //const 声明一个只读的常量，一旦声明，常量的值就不能改变。
25 //https://acg.toubiec.cn/random.php 写真与二次元
26 //API - 樱次元https://www.yingciyuan.cn/
27 //https://acg.toubiec.cn随机二次元图片
28 //https://www.dmoe.cc/随机二次元图片API-樱花
29 //韩小韩API接口站https://api.vvhan.com/api/acgimg一个随机二次元图片接口
30 const url = "https://api.vvhan.com/api/acgimg";
31 const url_2 = "https://cdn.jsdelivr.net/gh/uxiaohan/GitImgTypecho/Acg/api.vvhan.com[217].jpg"
32
33 // 获得dom元素
34 const img = document.querySelector('#img');
35 const img_2 = document.querySelector('#img_2');
36
37
38
39 //封装一个功能函数,参数传入。
40 function p(img, url) {
41
42 /*
43 Prminse在声明时候就被运行了。接受一个回调函数，有两个参数resolve, reject
44 Prminse作用把内部的 异步操作代码 包装起来。留出新的接口 方式通过resolve, reject。
45
46 流程原理：
47 等待Prminse内部的异步代码运行完成，触发事情，获得回调函数之后，返回resolve, reject。
48 resolve结果传入then(返回一个回调函数)
49 reject结果传入catch(返回一个回调函数)
50 */
51 new Promise((resolve, reject) => {
52
53 //创建 XMLHttpRequest对象
54 const rep = new XMLHttpRequest();
55
56 //以get的方式，向url发送，异步请求
57 rep.open('GET', url);
58
59 //请求的格式为图片格式
60 rep.responseType = 'blob'; // then()会返回一个 Blob对象
61
62 //onload监听器，事件在对象被加载后发生
63 rep.onload = function () {
64 //如果请求对象.的状态码为200
65 if (rep.status === 200) {
66 //修改img的是src链接
67 img.src = url;
68
69 console.log('//返回rep响应的结果')
70 return resolve(rep.response);
71 } else {
72 //否则返回失败
73 console.log('失败');
74 //返回 失败结果
75 return reject(Error('failed失败'))
76
77 }
78 }
79
80 // onerror监听器，监听链接问题
81 rep.onerror = function () {
82 console.log('network error网络错误');
83
84 //依然返回错误
85 return reject(Error('network error网络错误'))
86 }
87 // rep对象，发送请求
88 rep.send();
89 })
90 }
91
92 // 函数的调用
93 // 获得一张图片
94 p(img, url).then(); // 错误：因为 function p 不返回then()内容
95 // 再次获得一张图片
96 p(img_2, url_2);
97 </script>
98
99 </body>
100
101 </html>
在第一个rep返回response响应之后，在运行第二个异步请求。案例4
<!--
在第一个rep返回response响应之后，在运行第二个异步请求
--> <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在第一个rep返回response响应之后，在运行第二个异步请求</title> <c>//通过Promise封装函数，发送异步请求</c>
<!-- 容器 -->
<img id="img"> <i>//通过Promise封装函数，再次发送请求req_2</i>
<!-- 容器2 -->
<img id="img_2"> </head> <body>
<script>
//const 声明一个只读的常量，一旦声明，常量的值就不能改变。
//https://acg.toubiec.cn/random.php 写真与二次元
//API - 樱次元https://www.yingciyuan.cn/
//https://acg.toubiec.cn随机二次元图片
//https://www.dmoe.cc/随机二次元图片API-樱花
//韩小韩API接口站https://api.vvhan.com/api/acgimg一个随机二次元图片接口
const url = "https://api.vvhan.com/api/acgimg";
const url_2 = "https://cdn.jsdelivr.net/gh/uxiaohan/GitImgTypecho/Acg/api.vvhan.com[217].jpg" // 获得dom元素
const img = document.querySelector('#img');
const img_2 = document.querySelector('#img_2'); //封装一个功能函数,参数传入。
function p(img, url) { /*
Prminse在声明时候就被运行了。接受一个回调函数，有两个参数resolve, reject
Prminse作用把内部的 异步操作代码 包装起来。留出新的接口 方式通过resolve, reject。 流程原理：
等待Prminse内部的异步代码运行完成，触发事情，获得回调函数之后，返回resolve, reject。
resolve结果传入then(返回一个回调函数)
reject结果传入catch(返回一个回调函数)
*/ //解决方法：直接返回Promise
return new Promise((resolve, reject) => { //创建 XMLHttpRequest对象
const rep = new XMLHttpRequest(); //以get的方式，向url发送，异步请求
rep.open('GET', url); //请求的格式为图片格式
rep.responseType = 'blob'; // then()会返回一个 Blob对象 //onload监听器，事件在对象被加载后发生
rep.onload = function () {
//如果请求对象.的状态码为200
if (rep.status === 200) {
//修改img的是src链接
img.src = url; console.log('//返回rep响应的结果')
return resolve(rep.response);
} else {
//否则返回失败
console.log('失败');
//返回 失败结果
return reject(Error('failed失败')) }
} // onerror监听器，监听链接问题
rep.onerror = function () {
console.log('network error网络错误'); //依然返回错误
return reject(Error('network error网络错误'))
}
// rep对象，发送请求
rep.send();
})
} // 函数的调用
// 获得一张图片
// 因为 then() 是Promise类型带有功能
p(img, url).then((res) => { // 在第一个Promise的resolve之后，才运行第二个 Promise。这时两个Promise就链接在一起了
p(img_2, url_2); console.log(res)
});
</script> </body> </html>
Promise如何使用then衔接。案例5
<!--
Promise如何使用then衔接
-->
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise如何使用then衔接</title> <c>//通过Promise封装函数，发送异步请求</c>
<!-- 容器 -->
<img id="img"> <i>//通过Promise封装函数，再次发送请求req_2</i>
<!-- 容器2 -->
<img id="img_2"> </head> <body>
<script>
//const 声明一个只读的常量，一旦声明，常量的值就不能改变。
//https://acg.toubiec.cn/random.php 写真与二次元
//API - 樱次元https://www.yingciyuan.cn/
//https://acg.toubiec.cn随机二次元图片
//https://www.dmoe.cc/随机二次元图片API-樱花
//韩小韩API接口站https://api.vvhan.com/api/acgimg一个随机二次元图片接口
const url = "https://api.vvhan.com/api/acgimg";
const url_2 = "https://cdn.jsdelivr.net/gh/uxiaohan/GitImgTypecho/Acg/api.vvhan.com[217].jpg" // 获得dom元素
const img = document.querySelector('#img');
const img_2 = document.querySelector('#img_2'); //封装一个功能函数,参数传入。
function p(img, url, count) { /*
Prminse在声明时候就被运行了。接受一个回调函数，有两个参数resolve, reject
Prminse作用把内部的 异步操作代码 包装起来。留出新的接口 方式通过resolve, reject。 流程原理：
等待Prminse内部的异步代码运行完成，触发事情，获得回调函数之后，返回resolve, reject。
resolve结果传入then(返回一个回调函数)
reject结果传入catch(返回一个回调函数)
*/ //解决方法：直接返回Promise
return new Promise((resolve, reject) => { //创建 XMLHttpRequest对象
const rep = new XMLHttpRequest(); //以get的方式，向url发送，异步请求
rep.open('GET', url); //请求的格式为图片格式
rep.responseType = 'blob'; // then()会返回一个 Blob对象 //onload监听器，事件在对象被加载后发生
rep.onload = function () {
//如果请求对象.的状态码为200
if (rep.status === 200) {
//修改img的是src链接
img.src = url; console.log('//返回rep响应的结果')
//return resolve(rep.response);
return resolve(count);
} else {
//否则返回失败
console.log('失败');
//返回 失败结果
return reject(Error('failed失败')) }
} // onerror监听器，监听链接问题
rep.onerror = function () {
console.log('network error网络错误'); //依然返回错误
return reject(Error('network error网络错误'))
}
// rep对象，发送请求
rep.send();
})
} // 函数的调用
// 获得一张图片
// 因为 then() 是Promise类型带有功能
p(img, url, 1)
.then((res) => {
console.log(res); //1
//二次调用Promise
return p(img_2, url_2, 2); //在这个函数调用时，依然返回Promise
})
.then((res) => { //这个then返回结果，是 p(img_2, url_2, 1)的Promise返回resolve的结果
console.log(res); //2 返回上一步count的结果
//return p(img_3, url_3, 3);
})
//...多个then
.catch((err) => { //接受，整个链式反应，任何地方发生的错误
console.log(err);
}); /*
...
//多个then链接，某一需要上步结果时候，以参数传递
.then((res) => {
console.log(res); //2 返回上一步count的结果
return p(img_3, url_3, 3);
})
.then((res) => {
console.log(res);//3 返回上一步count的结果
return p(img_4, url_4, 4);
})
.then((res) => {
console.log(res);
return p(img_5, url_5, 5);
})
.then((res) => {
console.log(res);
return p(img_6, url_6, 6);
})
.catch((err) => { //接受，整个链式反应，任何地方发生的错误
console.log(err);
}); */
</script> </body> </html>
XMLHttpRequest—>Promise的更多相关文章
- [书籍翻译] 《JavaScript并发编程》第三章 使用Promises实现同步
本文是我翻译<JavaScript Concurrency>书籍的第三章 使用Promises实现同步,该书主要以Promises.Generator.Web workers等技术来讲解J ...
- 复习promise---node
promise这个东西,我都不知道见过多少回了!,非常重要,这里在回忆一遍 发现问题 const fs = require('fs') fs.readFile('./data/1.txt', (err ...
- vue基础api
vue比jq好处 1jq 频繁操作dom 增加了性能消耗 vue 模拟dom 从内存中拿 2jq 数据没有统一管理 vue 统一管理数据 3vue 组件开发可以提取出公共的html或js mv*好 ...
- vue 运行项目时，Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
npm run dev 运行项目后 验证码显示不出来 并报错 Uncaught (in promise) DOMException: Failed to execute 'open' on 'XML ...
- Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
解决方案:url前面一定要加http://
- 闲话Promise机制
Promise的诞生与Javascript中异步编程息息相关,js中异步编程主要指的是setTimout/setInterval.DOM事件机制.ajax,通过传入回调函数实现控制反转.异步编程为js ...
- JavaScript进阶之路——认识和使用Promise，重构你的Js代码
一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...
- ES6深入学习记录(二)promise对象相关
1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promis ...
- es6中的promise对象
Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...
随机推荐
- C语言数组实现三子棋
C语言实现三子棋(通过数组) 需要包含的头文件 #include <stdio.h> #include <stdlib.h> #include <time.h> 创 ...
- 现代 C++ 对多线程/并发的支持（上） -- 节选自 C++ 之父的 《A Tour of C++》
本文翻译自 C++ 之父 Bjarne Stroustrup 的 C++ 之旅(A Tour of C++)一书的第 13 章 Concurrency.用短短数十页,带你一窥现代 C++ 对并发/多线 ...
- 使用 grpcurl 通过命令行访问 gRPC 服务
原文链接: 使用 grpcurl 通过命令行访问 gRPC 服务 一般情况下测试 gRPC 服务,都是通过客户端来直接请求服务端.如果客户端还没准备好的话,也可以使用 BloomRPC 这样的 GUI ...
- xshell连接VMware中的Linux
[前言]最近想压测一下ITOO的考试系统,所以想在自己电脑上安装一下linux,然后安装一下jmeter进行压测一下. 不过为什么要连接xshell呢,因为在虚拟机上总是会和主机切换鼠标,而且也不能粘 ...
- Vuls 漏洞扫描工具部署及效果展示
Vuls 漏洞扫描工具部署及效果展示 介绍 Vuls根据NVD,OVAL等数据对主流Linux系统进行扫描,并具有完善的报告. 支持系统 Distribution Release Alpine 3.3 ...
- Netty 了解
1.1 Netty 是什么? Netty is an asynchronous event-driven network application framework for rapid develop ...
- Kubernetes-Service介绍(三)-Ingress(含最新版安装踩坑实践)
前言 本篇是Kubernetes第十篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战. Kubernetes系列文章: Kubernetes介绍 Kubernetes环境搭建 Kuberne ...
- python常用内置函数（转载）
1. 和数字相关 1.1 数据类型 1.2 进制转换 1.3 数学运算 2. 和数据结构相关 2.1 序列 2.2 数据集合 2.3 相关内置函数 3. 和作用域相关 4. 和迭代器生成器相关 5. ...
- 【原创】Linux v4l2框架分析
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...
- 第五课第四周笔记2：Self-Attention 自注意力
Self-Attention 自注意力 让我们跳进去谈谈transformer的self-attention机制.如果您能了解本视频背后的主要思想,您就会了解变压器网络工作背后最重要的核心思想. 让我 ...