资讯专栏INFORMATION COLUMN

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

立即前往
首页/文章专栏/浅解Promise

浅解Promise

summerpxy / 1760人阅读

摘要：对于异步的解决方案是新增的内置对象，通常使用构造函数创建，实例，解决异步问题。构造函数必须接收一个函数作为参数，我将其称为函数，函数也可以接收两个参数，和，它们是两个函数，由运行环境提供，无需自己部署。如何理解规范中的这三个状态及其规则。

对于异步的解决方案 Promise

Promise是ES6新增的内置对象，通常使用Promise构造函数创建，Promise实例，解决异步问题。

1.Promise构造函数必须接收一个函数作为参数，我将其称为executor函数，executor函数也可以接收两个参数，resolve和reject，它们是两个函数，由ECMAScript运行环境提供，无需自己部署。

//执行Promise函数，它返回一个promise实例对象
let promise=new Promise ((resolve,reject)=>{  
    console.log(1);
});

当我们使用new创建一个构建一个Promise实例后，Promise实例内部的两个属性需要理解。

让我们输出上方的promise实例

[[PromiseStatus]]: "pending"
[[PromiseValue]]: undefined

[[PromiseStatus]]:保存当前promise实例的状态,可能值pending,resolved,rejected

[[PromiseValue]]：在promise未完成状态时，其值为undefinde,当promise完成后，其值为异步数据，或者错误信息。当执行了resolve()，[[PromiseValue]]的值就是resolve()传入 的表达式的值，通常就是是我们需要的值。当我们使用了reject()，这个值为reject()的传入值，通常这个值为错误提示

2.对于resolve和reject，它们的作用是判断对象的状态。并且它们调用时可以接收一个参数。

let promise=new Promise ((resolve,reject)=>{  
    console.log(1);
    resolve("成功");
});

当调用了resolve或reject ,promise实例的[[PromiseStatus]]将发生改变。

现在，让我们更加详细的去了解Promise promise状态

一个Promise对象的当前状态必须为一下三种状态的一种:Pending(等待状态),Fulfilled（执行状态）,Rejected（拒绝状态）

Pending：处于Pending状态时，promise可以满足以下条件

​ 可以由Pending转为Fulfilled或Rejected ，

Fulfilled：处于Fulfilled状态时，promise满足以下条件

​ 1.不可再变为其它状态。

​ 2.必须有一个不可被改变的值。

Rejected：

​ 1.不可再变为其它状态。

​ 2.必须有一个不可被改变的值。

如何理解Promise A + 规范中的这三个状态及其规则。

Promise对象的两个内部属性可以很好帮我们去解释理解。

[[PromiseStatus]] ,[[PromiseValue]]

现在，进行Promise第一步，新建一个Promise对象，对象两个内部属性被初始化

[[PromiseStatus]] :Pending

[[PromiseValue]]：undefined

此时是规范中的第一种状态，OK，根据规范的Pending状态的条件，我们可以去改变其状态。

executor函数在Promise对象创建后立即执行。

倘若我们在executor函数执行了resolve()函数,并且，将一个表达式(Expression)作为其参数传入。此时内部属性值的变化

[[PromiseStatus]]:resolved

[[PromiseValue]]：<表达式的值>

此时，Promise对象的状态有Pending变为Fulfilled.通俗点说，就是由等待变为成功。根据Promise A+ 的Fulfilled状态的规范条件，此时，无论接下来在遇到什么情况，都不会去改变它的状态！，并且Promise对象将会有一个值，Yes,这个值就是我们需要的值，准确的说，它就是那个传入的表达式的值，并且这个值通过resolve()函数存入了[[PromiseValue]]属性中。我们无法直接去使用它，而是通过then()去获取

让我们来看个例子

let  p1 = new Promise((res,rej)=>{
 res((() => {
        return "成功了";
        })())
    })
console.log(p1); 
//输出
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: "成功了"
倘若我们在executor函数执行了reject()函数,并且，将一个表达式(Expression)作为其参数传入。此时内部属性值的变化
let  p2 = new Promise((res,rej)=>{
 rej((() => {
      return "失败了";
    })())
})
console.log(p2);
// promise对象的两个属性
[[PromiseStatus]]: "rejected"
[[PromiseValue]]: "失败了"

此时，Promise对象的状态有Pending变为Fulfilled，由等待变为失败，根据Promise A+ 的Fulfilled状态的规范条件，此时，无论接下来在遇到什么情况，都不会去改变它的状态！并且Promise对象将会有一个值，同样也是那个传入的表达式的值，不过我们将这个值称为拒因或失败原因。

注意：resolve或reject并不会终结 Promise 的executor函数的执行

我们已经在executor函数中执行了resolve或reject函数，状态发生改变，内部属性值也发生了改变

现在，该启动then()方法和 catch()方法了。 then()

它有两个函数作为参数，通常，我们只使用第一个函数来获取[[PromiseStatus]]的值为"resolved"的对象的[[PromiseValue]]值,回调函数接收一个参数，此参数就是[[PromiseValue]]值

let  p1 = new Promise((res,rej)=>{
 res((() => {
        return "成功了";
        })())
    }).then(data=>{
        console.log(data) 
    })

注意 ： then() 方法产生一个微任务，其回调将会被置入上一个宏任务队列后。

cathc()

当[[PromiseStatus]]为reject时，调用此方法。

它接收一个函数作为参数，此函数接收一个参数，该参数就是拒因

let  p2 = new Promise((res,rej)=>{
 rej((() => {
        return "失败了";
        })())
    }).then(data=>{
        console.log(data) 
    }).catch(error=>console.log(error))

现在大致了解了Promise是怎么回事了 Good!

还有注意 :无论如何，在使用Promise对象时，加上catch()，否则你很可能不知道错误到底是出在哪里

GPU云服务器 云服务器 浅解 promise Promise使用 promise用法

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

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

相关文章

  • 【前端面试分享】- 寒冬求职上篇

    摘要：记录下我遇到的面试题，都有大佬分享过，附上各个大佬的文章，总结出其中的主要思想即可。推荐黑金团队的文章前端缓存最佳实践推荐名扬的文章浅解强缓存和协商缓存状态码重点是等，要给面试官介绍清楚。前言 在这互联网的寒冬腊月时期，虽说过了金三银四，但依旧在招人不断。更偏向于招聘高级开发工程师。本人在这期间求职，去了几家创业，小厂，大厂厮杀了一番，也得到了自己满意的offer。 整理一下自己还记得的面试...

    shinezejian 评论0 收藏0

  • Promise的几个扩展API总结

    摘要：的几个扩展总结描述和相反，当所有的被拒绝之后，方法执行完成的决议，如果存在一个执行完成的决议，方法则执行拒绝里边的所有实例反过来就好了执行到此执行到此描述忽略被拒绝的，只需要有一个完成的，方法就执行完成操作，如果全部的都被拒绝，方法执行拒绝 Promise的几个扩展API总结 1. Promise.none 描述： 和 Promise.all 相反，当所有的promise被拒绝之后，n...

    李义 评论0 收藏0

  • 异步发展流程 —— 手写一个符合 Promise/A+ 规范的 Promise

    摘要：构造函数的实现我们在使用的时候其实是使用关键字创建了一个的实例，其实是一个类，即构造函数，下面来实现构造函数。 showImg(https://segmentfault.com/img/remote/1460000018998456); 阅读原文 概述 Promise 是 js 异步编程的一种解决方案，避免了 回调地狱 给编程带来的麻烦，在 ES6 中成为了标准，这篇文章重点不是叙...

    UnixAgain 评论0 收藏0

  • Promise 对象的理解

    摘要：使用对象的好处在于可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。对象异步操作抛出错误，状态就会变为，就会调用方法指定的回调函数处理这个错误。 Promise 含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。 所谓 P...

    church 评论0 收藏0

  • Promise 中的三兄弟 .all(), .race(), .allSettled()

    摘要：对于的来说基元函数包括组合函数的类型签名返回情况完成如果传入的可迭代对象为空，会同步地返回一个已完成状态的。相反，如果是在指定的时间之后完成，刚返回结果就是一个拒绝状态的从而触发方法指定的回调函数。在行中，对每个小任务得到的结果进行汇总。 为了保证的可读性，本文采用意译而非直译。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 从ES6 开始，我们大都使用的是 P...

    vspiders 评论0 收藏0

发表评论

登陆后可评论

0条评论

summerpxy

男|高级讲师
我要私信

TA的文章

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