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 ...
随机推荐
- python基础知识三——try与except处理异常语句
try/except介绍 与其他语言相同,在python中,try/except语句主要是用于处理程序正常执行过程中出现的一些异常情况,如语法错(python作为脚本语言没有编译的环节,在执行过程中对 ...
- 1.pytest初尝试
语法规范 pytest命令会默认执行以 -- test_**.py -- 或 -- **_test.py -- 命名文件的测试用例 pytest的测试用例必须以 -- test -- 开头 def t ...
- WebMagic 爬虫技术
WebMagic WebMagic 介绍 WebMagic基础架构 Webmagic 的结构分为 Downloader.PageProcessor.Scheduler.Pipeline四大组件,并由 ...
- 从0到1使用Kubernetes系列——Kubernetes入门
基本概念 Docker 是什么 Docker 起初是 dotCloud 公司创始人 Solomon Hykes 在法国的时候发起的一项公司内部项目,Docker 是基于 dotCloud 公司多年云服 ...
- NOIP模拟76
前言 还有不到 10 天就要 CSP-S ...马上我就要有我的第一篇游记了. 今天考试莽了一回,整了大概 2.5h 的 T1 ,可能是因为今天题目比较难,看起来成效不错. 以后还是要注意时间的分配( ...
- 一个神秘的oj2093 花园的守护之神（最小割）
给定一张无向图,你每次可以将一条路的权值增加1,询问最少增加多少次才会使得\(s->t\)的最短路改变 QwQ一看到这个题,我就用种最小割的感觉 我们可以把最短路上的点取出来,然后做最小割呀!! ...
- 【MySQL】MySQL（三）存储过程和函数、触发器、事务
MySQL存储过程和函数 存储过程和函数的概念 存储过程和函数是 事先经过编译并存储在数据库中的一段 SQL 语句的集合 存储过程和函数的好处 存储过程和函数可以重复使用,减轻开发人员的工作量.类似于 ...
- 阿里云服务器上在docker部署jenkins
1.查询jenkins:docker search jenkins 2.拉取jenkins镜像 docker pull jenkins/jenkins:lts 3.新建jenkins的工作目录: mk ...
- PAT (Basic Level) Practice （中文）1061 判断题 (15分)
1061 判断题 (15分) 判断题的评判很简单,本题就要求你写个简单的程序帮助老师判题并统计学生们判断题的得分. 输入格式: 输入在第一行给出两个不超过 100 的正整数 N 和 M,分别是学生人数 ...
- logstash的mutate过滤器的使用
logstash的mutate过滤器的使用 一.背景 二.需求 三.实现步骤 1.安装 `csv codec` 插件 2.准备需要读取的文件数据 3.编写 pipeline ,读取和输出数据 4.mu ...