Promise梳理
构造函数，用于创建一个承诺对象，承诺对象主要用于封装异步操作。
作用:就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。
(防止多层回调)
从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。
承诺发起
承诺成功 resolved
承诺失败 rejected
1) 获取或者创建一个承诺对象
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的承诺对象
代码：
@H_502_12@ 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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
