Promise/async、await帮我们解决了什么
它给我们提供了一种新的异步编程解决方案,同时避免了困扰已久的回调地狱
// 异步的处理可能会产生这样的回调地狱(第二个异步操作和第一个异步的结果有关系) let Ajax = function(data, success, error){ $.ajax({ data: data, success: function(res){ success(res) }, error: function(err){ error(err) } }) } Ajax(data,function(res){ Ajax(data,function(res){ // 继续循环回调 },function(err){}) },function(err){}) // 看看promise的处理方式 let promise = function (data) { return new Promise((resolve,reject) => { $.ajax({ data: data, success: function(res){ resolve(res) }, error: function(err){ reject(err) } }) }) } let data = {} // ajax请求参数 promise(data).then((res) => {return promise(res)}).catch(err => console.log(err)).then(res => console.log(res)) // async 、await的处理方式使得异步操作更方便 (async function(){ let res = await promise(data) let resp = await promise(res) console.log(resp) })()Promise的方法总结 Promise.prototype.then() Promise.prototype.catch() Promise.prototype.finally() Promise.all()
# 当存在多个没有相关性的异步操作时想一次性得到所有结果,可以使用promise.all() Promise.all([p1,p2,p3]) 只有当所有异步操作状态变为resolve的时候 返回所有值得数组 当有一个返回reject的时候 返回值为第一个reject的值Promise.race()
# 当存在多个没有相关性的异步操作时,想要获得返回速度最快的异步操作采用 Promise.race([p1,p2,p3]) 该方法返回第一个有返回值的异步操作的返回值(resolve或者reject) Promise.race([new Promise((resolve, reject) => { console.log("init p1") setTimeout(()=>{ console.log("init p1 +") resolve("p1") },2000) }),new Promise((resolve, reject) => { console.log("init p2") setTimeout(()=>{ console.log("init p2 +") resolve("p2") },1000) })]).then(res=>{console.log(res)}) 使用场景:设定一个请求的超时时间 Promise.race([new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve("1") },2000) }),new Promise((resolve,reject)=>{ setTimeout(()=>{ reject(new Error("time out")) },1000) })]).then((res=>console.log(res)))Promise.resolve()
Promise.resolve("111").then(res=>console.log(res))Promise.reject()
Promise.reject("err").catch(res=>console.log(res))Promise.try()[目前只是一个提案]
# 【使用时机】对于一个方法如果不知道是同步异步方法,但是想要用then来做后续操作,同时希望同步方法同步执行,异步方法异步执行。 # 等价方案 (async () => f())() .then(res=>console.log(res)) .catch(err=>console.log(err))async需要注意什么
错误的捕获
const f = () => console.log("now") (async () => f())() # async 会吃掉f()的错误,可以通过promise.catch()来捕获 (async () => f())() .then(res=>console.log(res)) .catch(err=>console.log(err))参考
Promise
async/await
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52177.html
Promise/async、await帮我们解决了什么 它给我们提供了一种新的异步编程解决方案,同时避免了困扰已久的回调地狱 // 异步的处理可能会产生这样的回调地狱(第二个异步操作和第一个异步的结果有关系) let Ajax = function(data, success, error){ $.ajax({ data: data, success: function...
Promise/async、await帮我们解决了什么 它给我们提供了一种新的异步编程解决方案,同时避免了困扰已久的回调地狱 // 异步的处理可能会产生这样的回调地狱(第二个异步操作和第一个异步的结果有关系) let Ajax = function(data, success, error){ $.ajax({ data: data, success: function...
摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...
摘要:版本以及之前,本身还没有异步执行代码的能力,宿主环境传递给引擎,然后按顺序执行,由宿主发起任务。采纳引擎术语,把宿主发起的任务称为宏观任务,把引擎发起的任务称为微观任务。基本用法示例的回调是一个异步的执行过程。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的...
阅读 2539·2021-10-11 10:58
阅读 1124·2021-09-29 09:34
阅读 1425·2021-09-26 09:46
阅读 3806·2021-09-22 15:31
阅读 701·2019-08-30 15:54
阅读 1442·2019-08-30 13:20
阅读 1238·2019-08-30 13:13
阅读 1468·2019-08-26 13:52