Promise
Promise还是什么?
理解
抽象表达:
1)Promise是一门新的技术(ES6规范)
2)Promise是JS中进行异步编程的新解决方案
备注:就方案是单纯使用回调函数
具体表达:
1)从语法上来说:Promise是一个构造函数
2)从功能上来说:Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值
异步编程
fs文件操作
require('fs').readFile('./index.html', (err,data)=>{})
数据库操作
AJAX
$.get('/server',(data)=>{})
定时器
setTimeout(()=>{},2000);
promise的状态改变
状态是实例对象中的一个属性 PromiseState
有三个值:
pending 未决定的
resolved / fullfilled 成功
rejected 失败
状态只有两种变化方式
- pending变为resolved
- pending变为rejected
说明:只有这两种,且一个promise对象只能改变一次
无论变为成功还是失败,都会有一个结果数据
成功的结果数据一般称为value,失败的结果数据一般称为reason
Promise对象的值
实例对象中的另一个属性 PromiseResult
保存着对象(异步任务)的成功
或失败
的结果
- resolve
- reject
promise的基本流程
const p=new Promise((resolve,reject)=>{
//执行异步操作
//成功调用resolve(),将promise状态设置为成功 resolved
resolve(data)//可以传参数
//失败调用reject(),将promise状态设置为失败 rejected
reject(data)//可以传参数
});
/*调用then方法来定义resolve函数和reject函数分别要做什么,上面是resolve函数的定义,默认形参名为value,下面是reject函数的定义,默认形参名为reason。*/
p.then(value=>{
//成功回调 onResolved() 返回一个新的Promise对象
},reason=>{
//失败回调 onRejected() 返回一个新的Promise对象
})
使用示例
1-promise初体验.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2 class="page-header">Promise初体验</h2>
<button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script>
//生成随机数
function rand(m,n){
return Math.ceil(Math.random()*(n-m+1))+m-1;
}
/**
* 点击按钮,2s后显示是否中奖(30%概率中奖)
* 若中奖弹出 恭喜,奖品为10w
* 若未中奖弹出 再接再厉
*
*/
//获取元素对象
const btn=document.querySelector('#btn');
//绑定单击事件
btn.addEventListener('click',function(){
//定时器
// setTimeout(()=>{
// //30% 1-100 1 2 30
// //获取从1-100的一个随机数
// let n=rand(1,100);
// //判断
// if(n<=30){
// alert('恭喜,奖品为10w');
// }else{
// alert('再接再厉');
// }
// },1000);
//Promise形式实现
//resolve 解决 函数类型的数据
//reject 拒绝 函数类型的数据
const p=new Promise((resolve,reject)=>{
setTimeout(()=>{
//30% 1-100 1 2 30
//获取从1-100的一个随机数
let n=rand(1,100);
//判断
if(n<=30){
resolve(n);//将promise对象的状态设置为 成功
}else{
reject(n);//将promise对象的状态设置为 失败
}
},1000);
});
//调用then方法
p.then((value)=>{
alert('恭喜,奖品为10w,您的中奖数字为 '+value);
},(reason)=>{
alert('再接再厉,您的号码为 '+reason);
})
})
</script>
</body>
</html>
2-promise实践练习.js
const { rejects } = require('assert');
const fs=require('fs');
const { resolve } = require('path');
//回调函数 形式
// fs.readFile('./resource/content.txt',(err,data)=>{
// //如果出错,则抛出错误
// if(err) throw err;
// //输出文件内容
// console.log(data.toString());
// })
//promise形式
let p=new Promise((resolve,reject)=>{
fs.readFile('./resource/content.txt',(err,data)=>{
//如果出错,则抛出错误
if(err) reject(err);
//输出文件内容
resolve(data);
});
});
//调用then
p.then(value=>{
console.log(value.toString());
},reason=>{
throw(reason)
})
3-promise实践练习-AJAX请求.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise 封装 AJAX</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2 class="page-header">Promise 封装AJAX操作</h2>
<button class="btn btn-primary" id="btn">点击发送AJAX</button>
</div>
<script>
//接口地址 https://api/apiopen.top/getJoke 不能用
//获取元素对象
const btn=document.querySelector('#btn')
btn.addEventListener('click',function () {
//创建promise
const p=new Promise((resolve,reject)=>{
//1.创建对象
const xhr=new XMLHttpRequest()
//2.初始化
xhr.open('GET','https://randomuser.me/api/');
//3.发送
xhr.send();
//4.处理响应结果
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
//判断响应状态码 2xx
if(xhr.status>=200 && xhr.status<300){
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
});
p.then(value=>{
//控制台打印响应结果
console.log(JSON.parse(value));
},reason=>{
//控制台打印响应状态码
console.warn(reason);
})
})
</script>
</body>
</html>
4-promise封装练习-fs模块.js
/**
* 封装一个函数mineReadFile读取文件内容
* 参数:path文件路径
* 返回promise对象
*/
const { rejects } = require("assert");
const { resolve } = require("path");
function mineReadFile(path){
return new Promise((resolve,reject)=>{
//读取文件
require('fs').readFile(path,(err,data)=>{
//判断
if(err) reject(err);
//成功
resolve(data);
})
})
}
mineReadFile('./resource/content.txt')
.then(value=>{
//输出文件内容
console.log(value.toString());
},reason=>{
console.log(reason);
})
5-util.promisify方法.js (将原来的方法进行promise风格转化)
//util.promisify方法
//引入util模块
const util=require('util');
//引入fs模块
const fs=require('fs');
//返回一个新的函数
let mineReadFile=util.promisify(fs.readFile);
mineReadFile('./resource/content.txt')
.then(value=>{
console.log(value.toString());
})
6-promise封装练习.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise封装AJAX操作</title>
</head>
<body>
<script>
/**
* 封装一个函数sendAJAX发送GET AJAX请求
* 参数 URL
* 返回结果 Promise对象
* */
function sendAJAX(url){
return new Promise((resolve,reject)=>{
const xhr=new XMLHttpRequest();
xhr.responseType='json';
xhr.open('GET',url);
xhr.send();
//处理结果
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
//判断成功
if(xhr.status>=200 && xhr.status<300){
//成功的结果
resolve(xhr.response);
}else{
//失败的结果
reject(xhr.status);
}
}
}
})
}
sendAJAX('https://randomuser.me/api/')
.then(value=>{
console.log(value);
},reason=>{
console.log(reason);
})
</script>
</body>
</html>
为什么要用Promise?
指定回调函数的方式更加灵活
- 旧的:必须在启动异步任务前指定
- promise:启动异步任务=>返回promise对象=>给promise对象绑定回调函数(甚至可以在异步任务结束后指定多个成功或失败的结果)
支持链式调用,可以解决回调地狱问题
什么是回调地狱?
回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调执行的条件
回调地狱的缺点?
不便于阅读
不便于异常处理
解决方案?
promise链式调用
如何使用Promise?
API
Promise沟槽函数:Promise(executor){}
(1) executor函数:执行器 (resolve,reject)=>{}
(2) resolve函数:内部定义成功时我们调用的函数 value=>{}
(3) reject函数:内部定义失败时我们调用的函数 reson=>{}
说明:executor会在Promise内部立即同步调用,异步操作在执行器中执行,就是随着Promise对象的创建执行器操作也立即被执行了
Promise.prototype.then 方法:(onResolved,onRejected)=>{}
(1) onResolved函数:成功回调函数 (value)=>{}
(2) onRejected函数:失败回调函数 (reason)=>{}
说明:指定用于得到成功value的成功回调和用于得到失败reason的失败回调 返回一个新的promise对象
Promise.prototype.catch方法(只能回调失败函数):(onRejected)=>{}
(1) onRejected函数:失败的回调函数 (reason)=>{}
let p=new Promise((resolve,reject)=>{ //修改promise状态 reject('error') }) //执行catch方法 p.catch(reason=>{ console.log(reason); })
Promise.resolve 方法:(value)=>{}
(1) value:成功的数据或promise对象
说明:返回一个成功/失败的promise对象
let p1=Promise.resolve(5221); console.log(p1); //如果传入的参数为 非Promise类型的对象,则返回的结果为成功promise对象 //如果传入的参数为 Promise对象,则参数的结果决定了resolve的结果 let p2=Promise.resolve(new Promise((resolve,reject)=>{ reject('Error') // resolve('OK'); })) p2.catch(reason=>{ console.log(reason); }) console.log(p2);
Promise.reject 方法:(reason)=>{}
(1) reason:失败的原因
说明:返回一个失败的promise对象,不管传入的参数是什么类型,都是返回传入的数据或对象的失败结果,即使传入的是一个成功的promise对象。
Promise.all方法:(promises)=>{}
(1) promises:包含n个promise的数组
说明:返回一个新的promise,只有所有的promise都成功才成功,只要有一个失败了就直接失败,成功的返回结果是所有成功promise的结果组成的数组,失败返回的是失败的那个promise的结果。
注意:
在
Promise.all
中,只要有一个Promise
失败(即变为rejected
状态),整个Promise.all
调用就会立即失败,并返回第一个被拒绝的Promise
的拒绝原因。其他Promise
的状态不再被关注。全成功:
let p1=new Promise((resolve,reject)=>{ resolve('OK'); }) let p2=Promise.resolve('Success') let p3=Promise.resolve('OKKKKK') const result=Promise.all([p1,p2,p3]); console.log(result);
p3失败:失败结果值为p3结果值
let p1=new Promise((resolve,reject)=>{ resolve('OK'); }) let p2=Promise.resolve('Success') let p3=Promise.reject('OKKKKK') const result=Promise.all([p1,p2,p3]); console.log(result);
Promise.race 方法:(promises)=>{}
(1) promises:包含n个promise的数组
说明:返回一个新的promise,第一个完成的promise结果状态就是最终的结果状态
promise的几个关键问题
如何改变promise的状态?
(1)resolve(value): 如果当前是pending就会变为resolved
(2)reject(reason): 如果当前是pending就会变为rejected
(3)抛出异常:如果当前是pending就会变为rejected
let p=new Promise((resolve,reject)=>{ //1.resolve函数 resolve('ok'); //pending => fulfilled(resolved) //2.reject函数 reject('error'); //pending => rejected //3.抛出错误 throw '出问题了' }) console.log(p);
一个promise指定多个成功/失败回调函数,都会调用吗?
当promise改变为对应状态时都会调用
let p=new Promise((resolve,reject)=>{ resolve('ok'); }); //指定回调1 p.then(value=>{ console.log(value); }); //指定回调2 p.then(value=>{ alert(value); })
改变promise状态和指定回调函数谁先谁后?
(1)都有可能,正常情况下是先指定回调再改变状态,但也可以先改状态再指定回调
(2)如何先改状态再指定回调?
- 在执行器中直接调用resolve()/reject()
- 延迟更长时间才调用then()
(3)什么时候才能得到数据?
- 如果先指定的回调,那当状态发生改变时,回调函数就会调用,得到数据
- 如果先改变的状态,那当指定回调时,回调函数就会调用,得到数据
promise.then()返回的新promise的结果状态由什么决定
promise.then()
返回的新Promise
的结果状态由then
方法的回调函数(onResolved
和onRejected
)的执行结果决定。具体来说:- 如果
onResolved
或onRejected
返回一个值,新的Promise
将会被resolve
成这个值。 - 如果
onResolved
或onRejected
抛出一个错误,新的Promise
将会被reject
,并且reject
原因是这个错误。 - 如果
onResolved
或onRejected
返回一个Promise
,新的Promise
将会采用这个Promise
的状态(resolved
或rejected
),并且相应地resolve
或reject
。
- 如果