ES6 Promise用法小结

38 篇文章 1 订阅
9 篇文章 0 订阅
什么是Promise呢?
  • ES6中一个非常重要和好用的特性就是Promise
    • 但是初次接触Promise会一脸懵逼,这TM是什么东西?
    • 看看官方或者一些文章对它的介绍和用法,也是一头雾水。
  • Promise到底是做什么的呢?
    • Promise是异步编程的一种解决方案。
  • 那什么时候我们会来处理异步事件呢?
    • 一种很常见的场景应该就是网络请求了。
    • 我们封装一个网络请求的函数,因为不能立即拿到结果,所以不能像简单的3+4=7一样将结果返回。
    • 所以往往我们会传入另外一个函数,在数据请求成功时,将数据通过传入的函数回调出去。
    • 如果只是一个简单的网络请求,那么这种方案不会给我们带来很大的麻烦。
  • 但是,当网络请求非常复杂时,就会出现回调地狱。
    • OK,我以一个非常夸张的案例来说明。
网络请求的回调地狱
  • 我们来考虑下面的场景(有夸张的成分):
    • 我们需要通过一个url1从服务器加载一个数据data1,data1中包含了下一个请求的url2
    • 我们需要通过data1取出url2,从服务器加载数据data2,data2中包含了下一个请求的url3
    • 我们需要通过data2取出url3,从服务器加载数据data3,data3中包含了下一个请求的url4
    • 发送网络请求url4,获取最终的数据data4

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q5qOOUfm-1617284129858)(Promise.assets/image-20210401204724714.png)]

分析:上面的代码有什么问题吗?正常情况下,不会有什么问题,可以正常运行并且获取我们想要的结果。但是,这样的代码难看而且不容易维护。我们更加期望的是一种更加优雅的方式来进行这种异步操作。Promise可以以一种非常优雅的方式来解决这个问题。

什么情况下会用到Promise
  • 一般情况下有异步操作时,使用promise对异步操作进行封装
  • 执行传入的回调函数时,会传入两个参数,resolve,reject本身又是函数
  • Promise将网络请求和处理代码分离
Promise的三种状态

异步操作之后会有三种状态

  • pending:等待状态,如正在进行网络请求,或者定时器还没到点
  • fulfill:满足状态,当主动回调了resolve时,就处于该状态,并且会回调.then()
  • reject:拒绝状态,当我们主动回调了reject时,就处于该状态,并且会回调catch()

在这里插入图片描述

Promise的基本使用
  • 我们先来看看Promise最基本的语法。

  • 这里,我们用一个定时器来模拟异步事件:

    • 假设下面的data是从网络上1秒后请求的数据
    • console.log就是我们的处理方式。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XWqJz7cW-1617284129860)(Promise.assets/image-20210401211506339.png)]

  • 上面我们过去的处理方式,我们将它换成Promise代码

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZZhkMbRE-1617284129862)(Promise.assets/image-20210401205241140.png)]

- 这个例子会让我们感觉脱裤放屁,多此一举

  • 首先,下面的Promise代码明显比上面的代码看起来还要复杂。

  • 其次,下面的Promise代码中包含的resolve、reject、then、catch都是些什么东西?

  • 我们先不管第一个复杂度的问题,因为这样的一个屁大点的程序根本看不出来Promise真正的作用。

分析

我们先来认认真真的读一读这个程序到底做了什么?

  • new Promise很明显是创建一个Promise对象
  • 小括号中((resolve, reject) => {})也很明显就是一个函数,而且我们这里用的是之前刚刚学习过的箭头函数。
    • 但是resolve, reject它们是什么呢?
    • 我们先知道一个事实:在创建Promise时,传入的这个箭头函数是固定的(一般我们都会这样写)
    • resolve和reject它们两个也是函数,通常情况下,我们会根据请求数据的成功和失败来决定调用哪一个。
  • 成功还是失败?
    • 如果是成功的,那么通常我们会调用resolve(messsage),这个时候,我们后续的then会被回调
    • 如果是失败的,那么通常我们会调用reject(error),这个时候,我们后续的catch会被回调
Promise的链式调用

Promise流程图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xGujRlY5-1617284129864)(Promise.assets/image-20210401210325424.png)]

分析:我们在看Promise的流程图时,发现无论是then还是catch都可以返回一个Promise对象。·所以,我们的代码其实是可以进行链式调用的:
这里我们直接通过Promise包装了一下新的数据,将Promise对象返回了。

  • Promise.resovle():将数据包装成Promise对象,并且在内部回调resolve()函数
  • Promise.reject():将数据包装成Promise对象,并且在内部回调reject()函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IE86vnMW-1617284129866)(Promise.assets/image-20210401210617847.png)]

简化版

  • 如果我们希望数据直接包装成Promise.resolve,那么在then中可以直接返回数据

  • 注意下面的代码中,我讲return Promise.resovle(data)改成了return data。结果依然是一样的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZGJYngz3-1617284129866)(Promise.assets/image-20210401210810799.png)]

分析:其实then和catch默认返回的也就是一个promise对象。当如果直接 return data 内部会自动进行Promise包装,等效于Promise.solve(data)

当如果需要Promise.reject(data)时,我们可以throw ‘ error message’ 。throw和reject回调都会被catch捕捉。

Promise的all方法

需求场景:当有两个或多个网路请求的时候(需求依赖两个或多个请求才能完成)all方法里面要求传一个可迭代对象,可以是一个数组,对象

Promise.all(Iterator)

使用的ajax的请求例子

<script>
 Promise.all([
   new Promise((resolve,reject)=>{
     //ajax的第一个网络请求
     $ajax({
       url:'',
       success:function(data){
         resolve(data);
       }
     })

   }),
   new Promise((resolve,reject)=>{
    //ajax的第2个网络请求
    $ajax({
       url:'',
       success:function(data){
         resolve(data);
       }
     })
   })
 ]).then(resualts=>{
    console.log(results);
   //两个请求都成功后进行处理, results是一个数组,存的是所有请求的返回数据。顺序是代码书写顺序,非请求成功顺序
    
    
 })
//results也可以被解构。 只是数组解构不是很常用,可以作为了解
/*  then((name1,name2)=>{

})或者
then([name1,name]=>{

})


*/


</script>
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

°PJ想做前端攻城狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值