资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/promise以及async、await学习总结

promise以及async、await学习总结

mist14 / 3438人阅读

Promise/async、await帮我们解决了什么 
</>复制代码 
  1. 它给我们提供了一种新的异步编程解决方案，同时避免了困扰已久的回调地狱
</>复制代码 
  1. // 异步的处理可能会产生这样的回调地狱（第二个异步操作和第一个异步的结果有关系）
  2. let Ajax = function(data, success, error){
  3.   $.ajax({
  4.       data: data,
  5.       success: function(res){
  6.         success(res)
  7.       },
  8.       error: function(err){
  9.         error(err)
  10.       }
  11.   })
  12. }
  13. Ajax(data,function(res){
  14.   Ajax(data,function(res){
  15.     // 继续循环回调
  16.   },function(err){})
  17. },function(err){})
  18. // 看看promise的处理方式
  19. let promise = function (data) {
  20.   return new Promise((resolve,reject) => {
  21.       $.ajax({
  22.           data: data,
  23.           success: function(res){
  24.               resolve(res)
  25.           },
  26.           error: function(err){
  27.               reject(err)
  28.           }
  29.       })
  30.   })
  31. }
  32. let data = {} // ajax请求参数
  33. promise(data).then((res) => {return promise(res)}).catch(err => console.log(err)).then(res => console.log(res))
  34. // async 、await的处理方式使得异步操作更方便
  35. (async function(){
  36. let res = await promise(data)
  37. let resp = await promise(res)
  38. console.log(resp)
  39. })()
Promise的方法总结 Promise.prototype.then() Promise.prototype.catch() Promise.prototype.finally() Promise.all() 
</>复制代码 
  1. # 当存在多个没有相关性的异步操作时想一次性得到所有结果，可以使用promise.all()
  2. Promise.all([p1,p2,p3])
  3. 只有当所有异步操作状态变为resolve的时候
  4. 返回所有值得数组
  5. 当有一个返回reject的时候
  6. 返回值为第一个reject的值
Promise.race() 
</>复制代码 
  1. # 当存在多个没有相关性的异步操作时,想要获得返回速度最快的异步操作采用
  2. Promise.race([p1,p2,p3])
  3. 该方法返回第一个有返回值的异步操作的返回值（resolve或者reject）
  4. Promise.race([new Promise((resolve, reject) => {
  5.   console.log("init p1")
  6.   setTimeout(()=>{
  7.     console.log("init p1 +")
  8.     resolve("p1")
  9.   },2000)
  10. }),new Promise((resolve, reject) => {
  11.   console.log("init p2")
  12.   setTimeout(()=>{
  13.     console.log("init p2 +")
  14.     resolve("p2")
  15.   },1000)
  16. })]).then(res=>{console.log(res)})
  17. 使用场景：设定一个请求的超时时间
  18. Promise.race([new Promise((resolve,reject)=>{
  19.     setTimeout(()=>{
  20.         resolve("1")
  21.     },2000)
  22. }),new Promise((resolve,reject)=>{
  23.     setTimeout(()=>{
  24.         reject(new Error("time out"))
  25.     },1000)
  26. })]).then((res=>console.log(res)))
Promise.resolve() 
</>复制代码 
  1. Promise.resolve("111").then(res=>console.log(res))
Promise.reject() 
</>复制代码 
  1. Promise.reject("err").catch(res=>console.log(res))
Promise.try()[目前只是一个提案] 
</>复制代码 
  1. # 【使用时机】对于一个方法如果不知道是同步异步方法，但是想要用then来做后续操作，同时希望同步方法同步执行，异步方法异步执行。
  2. # 等价方案
  3. (async () => f())()
  4. .then(res=>console.log(res))
  5. .catch(err=>console.log(err))
async需要注意什么 
</>复制代码 
  1. 错误的捕获
</>复制代码 
  1. const f = () => console.log("now")
  2. (async () => f())()
  3. # async 会吃掉f()的错误,可以通过promise.catch()来捕获
  4. (async () => f())()
  5. .then(res=>console.log(res))
  6. .catch(err=>console.log(err))
参考

Promise
async/await

GPU云服务器 云服务器 async await await-async async-await 机器学习学习总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52177.html

相关文章

  • promise以及async、await学习总结

    Promise/async、await帮我们解决了什么 它给我们提供了一种新的异步编程解决方案，同时避免了困扰已久的回调地狱 // 异步的处理可能会产生这样的回调地狱（第二个异步操作和第一个异步的结果有关系） let Ajax = function(data, success, error){ $.ajax({ data: data, success: function...

    zero 评论0 收藏0

  • promise以及async、await学习总结

    Promise/async、await帮我们解决了什么 它给我们提供了一种新的异步编程解决方案，同时避免了困扰已久的回调地狱 // 异步的处理可能会产生这样的回调地狱（第二个异步操作和第一个异步的结果有关系） let Ajax = function(data, success, error){ $.ajax({ data: data, success: function...

    fuchenxuan 评论0 收藏0

  • ES6-7

    摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版） 超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0

  • 重学前端学习笔记（十七）--Promise里的代码为什么比setTimeout先执行？

    摘要：版本以及之前，本身还没有异步执行代码的能力，宿主环境传递给引擎，然后按顺序执行，由宿主发起任务。采纳引擎术语，把宿主发起的任务称为宏观任务，把引擎发起的任务称为微观任务。基本用法示例的回调是一个异步的执行过程。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的...

    pinecone 评论0 收藏0

发表评论

登陆后可评论

0条评论

mist14

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<