什么是Promise?

Promise是一个构造函数,其原型上有 then、catch方法,还有reslove,reject等静态方法。通过创建Promise实例,可以调用Promise.prototype上的then、catch方法。

Promise的作用

MDN对Promise的描述:

Promise能够将异步操作最终成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 Promise,以便在未来某个时候把值交给使用者。

简单来说就是:使异步方法也能够根据其操作最终结果是成功还是失败的具体情况绑定不同的后续处理事件

Promise的使用

一个 Promise 必然处于以下几种状态之一:(其中fulfilled状态和rejected状态也称作settled状态

1、pending : 初始状态,既没有被兑现,也没有被拒绝。

2、fulfilled : 意味着操作成功完成。

3、rejected : 意味着操作失败。

处于初始状态(pending)的Promise,最终要么成功(fulfilled )要么失败(rejected ),无论成功还是失败,通过then方法调用相关处理程序。

在实例化Promise的时候需要传入 resolve 和 reject 这两个函数作为其参数,当异步任务顺利完成且返回结果值时,会调用 resolve 函数;而当异步任务失败且返回失败原因(通常是一个错误对象)时,会调用reject 函数。

then函数中有两个参数,如下:

promise.then(successCallback, failureCallback);

第一个参数是状态变为成功后应该执行的回调函数,第二个参数是状态变为失败后应该执行的回调函数。

具体使用例子:

let testPromise = new Promise((resolve,reject)=>{
setTimeout(function(){
// resolve('成功!') //状态为成功,传的参数作为then函数中成功函数的实参
reject('失败!') //状态为失败,传的参数作为then函数中失败函数的实参
}, 1000);
}); testPromise.then((data)=>{
console.log('success'+data)
},(err)=>{
console.log('fail'+err)
})

打印结果 "fail失败!"

其中 data 和 err 就是上面调用 resolve 和 reject 方法传入的值。

Promise链式调用

由上面例子可以知道 Promise链式调用可以实现多个异步操作连续执行,且上个操作执行成功后,执行下一个操作,并包含上个操作返回的结果。

因此链式调用可以很好解决 回调地狱 问题,避免了一层又一层的嵌套,虽然代码量可能没有减少,但是代码结构更加清晰、易读。

回调地狱例子:

toDoA(function(result) {
toDoB(result, function(newResult) {
toDoC(newResult, function(finalResult) {
console.log('最终结果: ' + finalResult);
}, failureCallback);
}, failureCallback);
}, failureCallback);

使用链式回调:

toDoA()
.then(result => toDoB(result))
.then(newResult => toDoC(newResult))
.then(finalResult => {
console.log(`'最终结果': ${finalResult}`);
})
.catch(failureCallback);

catch(failureCallback)可以看做then(null,failureCallback)

更多使用方法可以参考MDN

Promise(resolve,reject)的基本使用的更多相关文章

  1. ES6中的Promise.resolve()的作用

    var foo = { then: (resolve, reject) => resolve('foo') }; var resolved = Promise.resolve(foo); 相当于 ...

  2. [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)

    关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...

  3. es6中promise ALL Race Resolve Reject finish的实现

    function mypromise(func){ this.statue = "pending"; this.data = null; this.resolveCallback ...

  4. Promise.resolve( data)与Promise.reject( data )

    Promise.resolve( data)与Promise.reject( data ) 常用来生成已经决议失败或成功的promise实例: 1.Promise.reject(data)不管传递的是 ...

  5. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

  6. Promise.resolve解析

    总结自:https://blog.csdn.net/lq15310444798/article/details/81275278 Promise.resolve返回一个Promise实例 参数分4种情 ...

  7. [转载]es6 Promise.resolve()方法

    es6 Promise.resolve()方法 2018-01-27 22:29:06 ixygj197875 阅读数 16925更多 分类专栏: ES6标准入门 (阮一峰) ES6标准入门   Pr ...

  8. Promise.resolve()与Promise

    //Promise.resolve()和Promise.reject()常用来生成已经被决议为失败或者成功的promise案例 //Promise.reject()简单一些,不管传给它什么值,它决议为 ...

  9. Promise.resolve的作用

    Promise.resolve方法有下面三种形式: Promise.resolve(value); Promise.resolve(promise); Promise.resolve(thenable ...

随机推荐

  1. java实现责任链模式的小demo

    //一个请假请求 public class LeaveRequest { private int leaveDays; private String name; public void leave() ...

  2. Setoolkit部署

    禁止使用本文的知识进行违法犯罪活动!!学习这些内容是为了更好的防范钓鱼网站 详见我的github仓库 Setoolkit : Social-Engineer Toolkit(社会工程学工具包) 其作为 ...

  3. Beta阶段初始任务分配

    项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 团队项目-计划-Beta阶段说明书 一.Beta阶段总体规划 根据用户反馈与测试结果修复alpha版本的bu ...

  4. spring security中动态更新用户的权限

    在程序的执行过程中,有时有这么一种需求,需要动态的更新某些角色的权限或某些人对应的权限,当前在线的用户拥有这个角色或拥有这个权限时,在不退出系统的情况下,需要动态的改变的他所拥有的权限. 需求:张三 ...

  5. Spring Boot 2.5.0 重新设计的spring.sql.init 配置有何用?

    前几天Spring Boot 2.5.0发布了,其中提到了关于Datasource初始化机制的调整,有读者私信想了解这方面做了什么调整.那么今天就要详细说说这个重新设计的配置内容,并结合实际情况说说我 ...

  6. Spring Cloud 微服务实战——nacos 服务注册中心搭建(附源码)

    作为微服务的基础功能之一的注册中心担任重要的角色.微服务将单体的服务拆分成不同的模块下的服务,而不同的模块的服务如果进行通信调用呢?这就需要服务注册与发现.本文将使用阿里开源项目 nacos 搭建服务 ...

  7. docker 存储驱动(storage driver)知识总结

    http://www.sohu.com/a/101016494_116235 一,先看docker镜像是如何构建和存储. 下面是ubuntu:15.04的镜像分层.一共是4层,每一层都由一些只读并且描 ...

  8. Red Hat Enterprise Linux (RHEL) 9 更新了什么,即 Rocky Linux 9 和 AlmaLinux 9 展望

    请访问原文链接:https://sysin.org/blog/rhel-9-vision/,查看最新版.原创作品,转载请保留出处. 作者:gc(at)sysin.org,主页:www.sysin.or ...

  9. 【java+selenium3】自动化cookie操作+图形验证码处理 (十五)

    一.cookie操作 1.获取浏览器所有的cookie import java.util.Set; import org.openqa.selenium.Cookie; //获取浏览器所有的cooki ...

  10. Linux usb 4. Device 详解

    文章目录 1. 简介 2. Platform Layer 2.1 Platform Device 2.2 Platform Driver 3. UDC/Gadget Layer 3.1 Gadget ...