promise的作用
用来解决异步编程中回调地狱问题的。
回调地狱:
在异步js中,回调函数嵌套的太多,这就形成了回调地狱。
回调地狱的缺点:
1.不便于阅读
2.不利于维护。
例子
向对象求婚。
1.女朋友要考虑一秒钟再答复你,
2.同意后,让女孩父亲考虑一秒,再答复你,
3.同意后,让女孩母亲考虑一秒,再答复你,
4.同意后,让女孩姐姐考虑一秒钟,同意后,
5.让家里的小黄也得喜欢你,
6.恭喜你,进入了爱情的坟墓。
js代码
setTimeout(()=>{
//考虑一秒钟
if(Math.round(Math.random())){ //Math.round(Math.random()) 随机生成 01 0为false 1为真
console.log("女孩同意了");
setTimeout(()=>{
if(Math.round(Math.random())){
console.log("女孩父亲同意了");
setTimeout(()=>{
if(Math.round(Math.random())){
console.log("女孩母亲同意了");
setTimeout(()=>{
if(Math.round(Math.random())){
console.log("女孩姐姐同意了");
setTimeout(()=>{
if(Math.round(Math.random())){
console.log("小黄也喜欢你!");
console.log("恭喜你,进入了爱情的坟墓。");
}else{
console.log("汪汪");
}
},1000)
}else{
console.log("姐姐说:你要给我介绍男朋友");
}
},1000)
}else{
console.log("女孩母亲说:彩礼三十万");
}
},1000)
}else{
console.log("女孩父亲说:城里买房了吗");
}
},1000)
}else{
console.log("女孩说:你是一个好人");
}
},1000)
Promise介绍
Promise是ES6新增的一门技术
1.promise是一个构造函数
2.promise 对象用来封装异步代码 可以获取成功/失败的返回值
代码示例
//resolve 成功后执行的操作 reject失败后执行的操作
const p = new Promise((resolve,reject)=>{
//异步代码 如果成功就去执行resollve函数,失败 执行reject
if(Math.round(Math.random())){
resolve()
}else{
reject();
}
});
//then函数中的实参就是resolve
p.then(()=>{
console.log("成功了");
});
p.catch(()=>{
console.log("失败了");
})
promise的状态
promise对象 本质上代表的是一个未完成,但预计将要完成的操作
三种状态
pending 初始值
fulfilled 成功的状态
rejected 失败的状态
promise构造函数中需要传入一个回调函数 该函数有两个参数 resolve 和 reject
resolve 函数:会将promise对象的状态从peding变为fulfilled
reject函数: 会将promise对象从pending变为rejected
如图
promise改进上面代码
function getAllow(data,err){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if(Math.round(Math.random())){
//成功了
resolve(data)
}else{
//失败了
reject(err);
}
},1000)
})
}
//结果是一个promise对象
getAllow("女孩同意了","女孩说:你是个好人").then((data)=>{
console.log(data);
return getAllow("父亲同意了","父亲说:城里买房了吗?");
}).then((data)=>{
console.log(data);
return getAllow("母亲同意了","母亲说:彩礼三十万");
}).then((data)=>{
console.log(data);
return getAllow("姐姐同意了","姐姐说:你要给我介绍男盆友");
}).then((data)=>{
console.log(data);
return getAllow("小黄也喜欢你","汪汪");
}).then((data)=>{
console.log(data);
return getAllow("恭喜你!进入爱情的坟墓")
}).catch((err)=>{
console.log(err);
})
promise方法
//resolve方法返回一个成功状态的promise对象
let p1 = Promise.resolve("ok");
console.log(p1);
// reject方法返回一个失败状态的promise对象
let p2 = Promise.reject("error");
console.log(p2);
let p4 = Promise.reject("123");
// all接受一个包含多个promise对象的数组 返回值 如果传入的promise对象
let p3 = Promise.all([p1,p2,p4]);
console.log(p3);
let p5 = Promise.resolve("成功");
//let p3 = Promise.all([p1,p5]);
//console.log(p3);
//promise.all 用于需要多個异步操作都成功的时候 比如:分段读取一个文件等。
asyc介绍
async 异步 用来声明异步函数 该函数会返回一个promise对象 函数前面必须要有async关键字
示例
async function fn(){
if(Math.round(Math.random())){
//默认返回一个成功状态的promise对象 该结果是有 return来决定的
return "ok"
}else{
//抛出错误时,返回一个失败状态的promise对象
throw new Error("失败了");
}
}
let p = fn();
p.then((data)=>{
//获取成功的值 在then的回调函数中定义一个形参接受
console.log(data); //ok
}).catch((err)=>{
console.log(err);
})
console.log(p);
await表达式
asyn + await 能让我们以写同步代码的格式 来写异步代码
awit的用法
1.await的关键字必须写在async函数中。但是async函数可以没有await
2.await右侧书写表达式,表达式一般返回值为promise对象
3.await返回的是promise成功的结果
4.await的promise失败了,就会抛出异常,可以通过tryCatch来处理异常
示例
const p = new Promise((resolve,reject)=>{
if (Math.round(Math.random())) {
resolve("成功了")
} else {
reject("失败了")
}
});
async function fn(){
try{
//res的值就是promise成功的值
let res = await p;
console.log(res); //成功了
}catch(error){
//error就是promise对象失败时,传入的值
console.log(error);
}
}
fn();
await+async案例
function getAllow(data,err){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if(Math.round(Math.random())){
//成功了
resolve(data)
}else{
//失败
reject(err);
}
},100)
})
}
async function main(){
try{
//如果成功,gril变量中的就是成功后的结果 18行的data
let gril = await getAllow("女孩同意了", "你是一个好人");
console.log(gril);
let father = await getAllow("女孩父亲同意了", "女孩父亲:城里买房了吗");
console.log(father);
let mather = await getAllow("母亲同意了", "母亲说:彩礼三十万");
console.log(mather);
let sister = await getAllow("姐姐同意了", "姐姐说:你要给我介绍男朋友");
console.log(sister);
let smallYellow = await getAllow("小黄也喜欢你", "汪汪");
console.log(smallYellow);
console.log("恭喜你,进入了爱情的坟墓。");
}catch (error){
console.log(error);
}
}
main();