技术分享-PROMISE和ASYNC介绍

promise介绍
promise应用
async/await介绍
async/await应用
总结

1、promise介绍
1.1、promise含义
1）promise是ES6提供的异步编程的一种方案，优于传统的回调方案。
2）promise有三种状态：pending(进行中)，fulfilled已成功)，rejected(已失败)。异步操作结果可修改其状态，其他操作无法修改状态。状态一旦改变就不会再变；状态只会从pending变成fulfilled或者从pending变成rejected。
3）promise一旦新建会理解执行，无法中途取消。promise内部的错误只会反应到回调函数中，不会反应到外部。
1.2、promise基本用法
1）promise对象是一个构造函数，通过生成实例的方式使用。构造函数接受一个函数为参数，该函数有两个参数（resolve，reject),并且这两个参数也为两个函数，resolve是异步成功时调用，reject是异步失败调用。
2）promise实例具有then函数，then函数是一个处理resolved状态和rejected状态的回调函数。
3）promise实例catch函数，专门处理rejected状态的回调函数。
4）Promise.all函数，Promise.all可以将多个Promise实例包装成一个新的Promise实例。所有异步操作全部完成后才进行回调。成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
5）Promise.race函数，Promise.race把多个promise实例包装成一个新的promise。哪个结果获取的快，就直接返回那个结果。不管结果成功与否。

2、promise应用

<script>
//模拟异步操作
function promiseClick(){
let p = new Promise((resolve, reject) => {
setTimeout(function(){
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('随机数生成的值：',num)
if(num<=10){
resolve(num);
}
else{
reject('数字大于10了即将执行失败回调');
}
}, 2000);
})
return p
} 
//then回调(含有两个参数 参数都是函数 第一个函数是成功的回调。第二个失败的回调（可省略）)
promiseClick().then((data) => {
console.log('resolved成功回调');
console.log('成功回调接受的值：',data);
},(reason) => {
console.log('catch到rejected失败回调');
console.log('catch失败执行回调抛出失败原因：',reason);
});
//then().catch()--catch是失败回调的另一种写法
promiseClick()
.then((data) => {
console.log('resolved成功回调');
console.log('成功回调接受的值：',data);
})
.catch((reason) => {
console.log('catch到rejected失败回调');
console.log('catch失败执行回调抛出失败原因：',reason);
});

//async的调用
async function handleClick(){
try {
let result = await promiseClick();
console.log(result);
} catch (err){
console.log(err);
}
}
//方法调用
//hndleClick();
//配方(3s)--判断(2s)--发药(1s)
//原始做法(回调地狱)
function handleInfo(){
setTimeout(function(){
console.log('配方操作完毕！');
setTimeout(function(){
console.log('特殊药品判断完毕！');
setTimeout(function(){
console.log('发药操作完毕！');
}, 1000);
}, 2000);
}, 3000);
}
handleInfo();

function drugRecipe(){
console.log('药品发药--配方操作！');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('配方操作完毕！');
resolve('配方操作完成！');
}, 3000);
});
return p;
}
function special(){
console.log('药品发药-特殊药品判断操作！');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('特殊药品判断完毕！');
resolve('特殊药品判断完成！');
}, 2000);
});
return p;
}
function drugSend(){
console.log('药品发药-发药操作！');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('发药操作完毕！');
resolve('发药操作完成！');
}, 1000);
});
return p;
}
//promise依次调用
drugRecipe().then(()=>{
special().then(() => {
drugSend();
})
})

//promise依次调用
drugRecipe()
.then(()=>{
return special();
})
.then(()=>{
return drugSend();
})


//promise.all()--配方特殊处方判断
Promise.all([drugRecipe(), special()])
.then((result) => {
console.log(result);
console.log('配方与特殊药品判断完成！');
})

//promise.race()的使用--配方与特殊药品判断
Promise.race([drugRecipe(), special()])
.then((result) => {
console.log(result);
console.log('配方与特殊药品已有操作完成！');
})

//async/await调用
async function allHandle(){
await drugRecipe();
await special();
await drugSend();
}
//调用
allHandle();
</script>

 

3、async/await介绍
3.1、async/await含义
1）async是ES7实现的异步编程的更优的解决方案。
2）async/await：async声明一个异步函数，awiat等待异步函数的完成。
3）async函数返回的Promise对象，必须等到内部所有await命令的Promise对象执行完，才会发生状态改变。
3.2、async/await基本用法
1）await并且用在async声明的方法里，否则会报错。
2）await的后面需要是一个Promise对象，如果不是则会被转成Promise对象。如果promise对象变为reject流程中断。
3） async/await处理异常：把await放入try {} catch {}中，捕获异常进行处理。

4、async/await应用

//async的调用
async function handleClick(){
try {
let result = await promiseClick();
console.log(result);
} catch (err){
console.log(err);
}
} 
//async/await调用
async function allHandle(){
await drugRecipe();
await special();
await drugSend();
}
//调用
allHandle();

 

 

5、总结
1）Async/await是近些年来JavaScript最具革命性的新特性之一。他让读者意识到使用Promise存在的一些问题，并提供了自身来代替Promise的方案。
2）Async/await更加的简洁。
3）Async/Await让try/catch可以同时处理同步和异步错误。