当前位置: 首页 > news >正文

Promise、Async/Await 详解

一、什么是Promise

        Promise是抽象异步处理对象以及对其进行各种操作的组件。Promise本身是同步的立即执行函数解决异步回调的问题, 当调用 resolve 或 reject 回调函数进行处理的时候, 是异步操作, 会先执行.then/catch等,当主栈完成后,才会去调用执行resolve/reject中存放的方法。

        promise的功能是可以将复杂的异步处理轻松地进行模式化。采用Promise,连续读取多个文件,可以解决回调地狱。

如果说到基于JavaScript的异步处理,我想大多数都会想到利用回调函数。

const promise = new Promise(function(resolve, reject) {// ... some code
​if (/* 异步操作成功 */){resolve(value);} else {reject(error);}
});

       Promise则是把类似的异步处理对象和处理规则进行规范化, 并按照采用统一的接口来编写,而采取规定方法之外的写法都会出错。

// 使用Promise进行异步处理的一个例子
var promise = getAsyncPromise("fileA.txt"); 
promise.then(function(result){// then 获取文件内容成功时的处理
}).catch(function(error){// catch 获取文件内容失败时的处理
});

        Promise本身是同步的立即执行函数, 当在executor中执行resolve或者reject的时候, 此时是异步操作, 会先执行then/catch等,当主栈完成后,才会去调用resolve/reject中存放的方法执行。

console.log('script start')
let promise1 = new Promise(function (resolve) {console.log('promise1')resolve()console.log('promise1 end')
}).then(function () {console.log('promise2')
})
setTimeout(function(){console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

二、ES6 Promises 的API方法

 1、参数:Promise构造函数接受一个函数作为参数,其中该参数又接受两个函数作为它自身的参数,分别是resolve和reject。

new Promise((resolve, reject) => {//异步操作
})promise.then(function(data) {console.log('success');
}).catch(function(error) {console.log('error');
});

1.1  resolve

        返回一个promise对象成功的状态,并通知给then方法或catch方法,接下来根据对象的状态决定走哪条路,然后执行后续操作;resolve方法的作用是把promise对象的状态从进行中变成已完成,同时可以向resolve方法传入参数,这个参数会在将来被promise对象的then方法获取;

1.2  reject

       返回一个失败的promise对象;reject方法也是同样的道理,只不过是把promise对象状态变成失败,同时传入的参数会被catch方法获取而已。

        当resolve或reject修改promise对象状态之后,通过检测promise对象的状态,决定执行then还是catch回调方法。在这个过程中:resolve和reject起到的作用是修改对象状态、通知回调函数以及传递回调函数可能需要的参数。这样做的好处就是:把逻辑判断和回调函数分开处理。

2、回调函数 .then 和 .catch 

回调函数的调用是根据对象的状态来完成的:进行中、已完成和失败(pending(待定)、fullfilled(成功)rejected(失败)

2.1  Promise.then

1. 得到异步任务的正确结果;

2. 只有Promsie内部的状态落定了,then方法中对应的处理程序才会执行。

3. then方法的强大之处,可以链式调用

2.2  Promise.catch

进行捕获和处理失败结果

3、方法 .all() 和 .race() 

3.1  Promise.all()

  1. 并发处理多个异步任务(等待机制),所有结果都返回之后,统一打印;
  2. 谁跑得慢,以谁为准执行回调;
  3. Promise.all 接收一个 promise对象的数组作为参数,当这个数组里的所有promise对象全部变为resolve或reject状态的时候,它才会去调用 .then 方法。
let wake=(time)=>{return new Promise(function (resolve,reject){setTimeout(()=>{resolve(`${time/1000}秒后醒来`);},time);});
}
let p1=wake(10000);
let p2=wake(1000);
Promise.all([p1,p2]).then(res=>{let [res1,res2]=res;console.log(res1,res2);
}).catch(err=>{console.log(err);
})// 执行结果:10秒后醒来 1秒后醒来

3.2  Promise.race()

  1. 并发处理多个异步任务(赛跑机制), 任何一个异步操作完成,就执行下一步的.then;请求图片的时候使用;
  2. 谁跑得快,以谁为准执行回调
let p1=new Promise((resolve,reject)=>{setTimeout(()=>{resolve('success');}, 10000);
});let p2=new Promise((resolve,reject)=>{setTimeout(()=>{reject('faild');}, 500);
});Promise.race([p1,p2]).then(res=>{console.log(res);  
}).catch(err=>{console.log(err); // 返回的是faild
})

三、什么是 async/await

        async/await 是简化 Promise 异步操作(语法糖):async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再执行函数体内后面的语句。可以理解为,是让出了线程,跳出了 async 函数体

        async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再执行函数体内后面的语句。可以理解为,是让出了线程,跳出了 async 函数体。

async function async1(){console.log('async1 start');await async2();console.log('async1 end')
}
async function async2(){console.log('async2')
}console.log('script start');
async1();
console.log('script end')// 输出顺序:script start->async1 start->async2->script end->async1 end

1、async 语法

  1. 自动将常规函数转换成Promise,返回值也是一个Promise对象
  2. 只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数
  3. 异步函数内部可以使用await

2、await 语法

1.await 放置在Promise调用之前,await 强制后面点代码等待,直到Promise对象resolve,得到resolve的值作为await表达式的运算结果
2.await只能在async函数内部使用,用在普通函数里就会报错

3、错误处理

在async函数里,无论是Promise reject的数据还是逻辑报错,都会被默默吞掉,所以最好把await放入try{}catch{}中,catch能够捕捉到Promise对象rejected的数据或者抛出的异常

function timeout(ms) {return new Promise((resolve, reject) => {setTimeout(() => {reject('error')}, ms);  //reject模拟出错,返回error});
}
async function asyncPrint(ms) {try {console.log('start');await timeout(ms);  //这里返回了错误console.log('end');  //所以这句代码不会被执行了} catch(err) {console.log(err); //这里捕捉到错误error}
}asyncPrint(1000);// 执行结果: starterror
http://www.lryc.cn/news/107354.html

相关文章:

  • PoseiSwap:基于 Nautilus Chain ,构建全新价值体系
  • uC-OS2 V2.93 STM32L476 移植:串口打印篇
  • 代码随想录算法训练营第四十六天| 139.单词拆分 背包问题总结
  • 【机器学习】西瓜书习题3.3Python编程实现对数几率回归
  • Blazor前后端框架Known-V1.2.9
  • 【3D捏脸功能实现】
  • Kafka的零拷贝
  • 如何使用Python进行数据分析?
  • 概率论与数理统计复习总结3
  • PHP正则绕过解析
  • Hive巡检脚本
  • 【状态估计】基于UKF法、AUKF法的电力系统三相状态估计研究(Matlab代码实现)
  • webpack复习
  • 开始学习 Kafka,一文掌握基本概念|Kafka 系列 一
  • Couldn‘t lock the file :/tmp/bbc-filesystem-base_syscache_service
  • vscode 通过mongoose 连接mongodb atlas
  • 记录 Vue3 + Ts 类型使用
  • 主从同步带来的业务问题
  • 主动带宽控制工具
  • 数据采集的方法有哪些?
  • linux重新学习-纪录篇
  • 为机器人装“大脑” 谷歌发布RT-2大模型
  • JavaEE 面试常见问题
  • 06 HTTP(下)
  • clickhouse调研报告2
  • TensorRT学习笔记--基于TensorRT部署YoloV3, YoloV5和YoloV8
  • 原型链污染,nodejs逃逸例子
  • nlohmann::json 中文乱码解决方案
  • IDEA中maven项目失效,pom.xml文件橙色/橘色
  • 【雕爷学编程】MicroPython动手做(28)——物联网之Yeelight 2