Promise承诺对象

Posted 2021-03-25 szxepoch

　　Promise梳理
构造函数，用于创建一个承诺对象，承诺对象主要用于封装异步操作。
作用:就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。
(防止多层回调)
从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。
承诺发起
承诺成功 resolved
承诺失败 rejected
1) 获取或者创建一个承诺对象

1 let promise = new Promise(function(resolve,reject){
2 })
3 
4 resolve 方法, 将承诺对象 pending -> resolved
5 reject 方法, 将承诺对象 pending -> rejected

2) 使用承诺对象
Promise.prototype.then(successHandler[,errorHandler])
successHandler 当承诺成功的时候执行
errorHandler 当承诺失败的时候执行
一般不再then方法中添加errorHandler,而是将errorHandler放到catch中
返回值为当前promise实例
Promise.prototype.catch(errorHandler)
errorHandler 当承诺失败的时候执行
Promise.prototype.finally(handler)
handler 不管承诺对象的状态变为什么样子，这个handler函数都会执行
3) 高级特性
1. Promise.all([p1,p2,...])
将多个承诺对象合并为一个承诺对象，返回值为promise
promise
.then((result)=>{
//当所有的承诺都resolved的时候该回调函数才会执行
// result 为每个承诺对象返回值组成的一个数组
　　})
　　.catch(()=>{
　　//当有一个承诺对象rejected就会执行这个回调函数
　　})

　　当查询出所有顾客信息以及订单信息后打开模态框

2. Promise.race([p1,p2,...])
　　将多个承诺对象合并为一个承诺对象，返回值为promise
　　　promise
　　.then((result)=>{
　　//只要有一个承诺对象的状态变为resolved，就会执行该回调函数
　　})
　　.catch(()=>{
　　//只要有一个承诺对象的状态变为rejected，就会执行该回调函数
　　})
3. Promise.resolve(v)
　　将v转换为承诺对象
4. Promise.rejected(v)
　　返回一个状态为rejected的承诺对象

代码：

 1 let $ = {
 2 　　//使用回调
 3 　　get({url,success,error}){
 4 　　　　let xhr = new XMLHttpRequest();
 5 　　　　//设置请求行
 6 　　　　xhr.open("get",url);
 7 　　　　//设置请求头,标明请求体传递方式
 8 　　　　xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 9 　　　　//设置返回值
10 　　　　xhr.responseType = "json";
11 　　　　//设置请求体
12 　　　　xhr.send();
13　　　　 //监听机制
14 　　　　xhr.onreadystatechange = function(){
15 　　　　　　if(this.readyState === 4){
16 　　　　　　　　if(this.status === 200){ 
17 　　　　　　　　　　success(this.response);
18 　　　　　　　　}else{
19 　　　　　　　　　　error(this);
20 　　　　　　　　}
21 　　　　}
22 　　}
23 },
24 //使用promise承诺对象
25 get_promise(url){
26 　　return new Promise(function(resolve,rejected){
27 　　　　let xhr = new XMLHttpRequest();
28 　　　　//设置请求行
29 　　　　xhr.open("get",url);
30 　　　　//设置请求头,标明请求体传递方式
31 　　　　xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
32 　　　　//设置返回值
33 　　　　xhr.responseType = "json";
34 　　　　//设置请求体
35 　　　　xhr.send();
36 　　　　//监听机制
37 　　　　xhr.onreadystatechange = function(){
38 　　　　　　if(this.readyState === 4){
39 　　　　　　　　if(this.status === 200){
40 　　　　　　　　　　//请求成功
41 　　　　　　　　　　resolve(this.response);
42 　　　　　　　　}else{
43 　　　　　　　　　　//请求失败
44 　　　　　　　　　　rejected(this);
45 　　　　　　　　}
46 　　　　　　}
47 　　　　}
48 　　})
49 　　}
50 }
51 $.get({
52　　url:"http://134.175.100.63:6677/customer/findAll",
53 　　success:function(response){
54 　　　　console.log(response)
55 　　},
56 　　error:function(xhr){
57　　　　 console.log(xhr)
58 　　}
59 })
60 
61 $.get_promise(
62 　　"http://134.175.100.63:6677/customer/findAll"
63 ).then((response)=>{
64 　　//当promise的状态由 pending -> resolved
65 　　console.log("顾客信息:",response);
66 　}).catch((xhr)=>{
67 　　//当promise的状态由 pengding -> rejected
68 　　console.log(xhr);
69 　　alert("异常")
70 })
71 
72