首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript中的Promise使用详解

JavaScript中的Promise使用详解

作者头像
青年码农
发布2020-11-11 14:20:56
1.3K0
发布2020-11-11 14:20:56
举报
文章被收录于专栏:青年码农青年码农

熟悉前端开发的都一定写过回调方法(callback),简单的说,回调方法是一个函数被作为参数传递给另一个函数,比如下面的代码

function say (value) {
    alert(value);
}
function execute (someFunction, value) {
    someFunction(value);
}
execute(say, 'hello word');

say函数作为参数传递给execute函数,一般来说我们会碰到的回调嵌套都不会很多,一般就一到两级,但是某些情况下,回调嵌套很多时,代码就会非常繁琐,会给我们的编程带来很多的麻烦,这种情况俗称——地狱回调。

那么如何解决地狱回调,保持我们的代码简短,这时Promise就出场了,Promise对象可以理解为一次执行的异步操作,使用Promise对象之后可以使用一种链式调用的方式来组织代码;让代码更加的直观。我们用Promise对象改造上面的代码

function say(value) {
    return new Promise(function(resolve, reject) {
        resolve(value)
    })
}

function execute(value) {
    return new Promise(function(resolve, reject) {
        resolve(value)
    })
}

execute('hello word').then((value)=>{
    say(value).then((sayValue)=>{   
        alert(sayValue)
    })
})

上面代码只是根据第一段代码做的演示,代码量增加了,但是比传统的解决方案更合理和更强大。

Promise正如字面意思-承诺,“承诺将来会执行”约定的事情。我们首先需要了解Promise的三种状态:

  • pending: 初始状态,既不是成功,也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

先来构造下一个Promise实例

const promise = new Promise(function(resolve, reject) {
  // … some code

  If (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数。

Resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

Reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

还是拿第二段代码演示,讲下运行过程,首先是这段代码

execute('hello word').then((value)=>{
    say(value).then((sayValue)=>{   
        alert(sayValue)
    })
})

首先是调用execute方法,传入‘hello word’,这个execute方法返回promise对象。调用用then方法接收值,再调用say方法,传入execute方法返回的值,再调用then方法接收,最后alert。

暂时就写到这,后期在更新。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-11-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 青年码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Promise正如字面意思-承诺,“承诺将来会执行”约定的事情。我们首先需要了解Promise的三种状态:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档