Promise是一个构造函数,其身上有all、race、resolve、reject这些方法,都可以通过 Promise. 调用。

注意点1

Promise构造函数接受一个参数 => function,其中 function接受两个参数

resolve:表示从padding => resolve 成功

reject: 表示从padding => reject 失败

其状态不可逆

注意点2

在执行 all 或者 race 方法时:

all:语法 Promise.all([p1, p2, p3, ...]).then().catch()

只有p1、p2、p3 都成功才进入then,否则进入catch。虽然进入catch但是p1、p2、p3所对应的方法都还会继续执行

也就是说:p1最先执行完,但是有错误,此时进入了all的catch。但是此时p2、p3对应的函数还会执行,并不会停止

race:语法 Promise.race([p1, p2, p3, ...]).then().catch()

和all一样,唯一不同的是:p1、p2、p3 有一个成功,就算成功,进入then

注意点3:关于return的用法(什么时候加什么时候不加)

当Promise.then(onFulfilled, onRejected) 接收两个参数,一个是状态变为resolve后的回调函数,一个是状态变为reject后的回调函数(此处只讨论onFulfilled)

1、如果onFulfilled是一个函数,且有返回值,则返回值可以继续传递给后续的then

2、如果onFulfilled是一个函数,但没有返回值(相当于return undefined),则后续then中的入参为undefined

3、如果onFulfilled不是函数,则忽略当前then,将参数直接传递给后续的then

看如下代码

在函数aa中不用return,但是在函数bb需要return。否则在下边的msg 和 p 打印结果取不到。

其原因:和上边所说一样,then 接受是一个函数,且需要返回值,所以需要return

而在函数aa中不需要return的原因是:通过new Promise(resolve, reject) 中的resolve方法返回相当于自动将返回值,挂在了promise中

而在函数bb中,通过构造函数Promise下的resolve方法是没有挂在到当前的promise中,所以当调用then的时候拿不到返回值,因此这里需要自己手动return.

另外:

1、不管是函数aa还是函数bb最外层的return是为了拿到函数返回值,和promise没有关系

2、如果在函数aa的promise中也加了return,只是为了阻止代码继续向下执行而已,和取值没有关系,如下代码,return的作用只是为了不让console.log(111) 执行

function aa () {
return new Promise((resolve, reject) => {
setTimeout(() => {
return resolve({"msg": "aa"})
console.log(111)
}, 1000);
})
}

记住一点:通过new Promise(resolve,reject)的方式,当调用then去值的话不用加return,如果通过Promise.resolve获取的话,当调用then去值的话需要加return

Promise 一些注意点的更多相关文章

  1. Javascript - Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下.   一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...

  2. 路由的Resolve机制(需要了解promise)

    angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...

  3. angular2系列教程(七)Injectable、Promise、Interface、使用服务

    今天我们要讲的ng2的service这个概念,和ng1一样,service通常用于发送http请求,但其实你可以在里面封装任何你想封装的方法,有时候控制器之间的通讯也是依靠service来完成的,让我 ...

  4. 闲话Promise机制

    Promise的诞生与Javascript中异步编程息息相关,js中异步编程主要指的是setTimout/setInterval.DOM事件机制.ajax,通过传入回调函数实现控制反转.异步编程为js ...

  5. 深入理解jQuery、Angular、node中的Promise

    最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...

  6. Promise的前世今生和妙用技巧

    浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...

  7. JavaScript进阶之路——认识和使用Promise,重构你的Js代码

    一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...

  8. 细说Promise

    一.前言 JavaScript是单线程的,固,一次只能执行一个任务,当有一个任务耗时很长时,后面的任务就必须等待.那么,有什么办法,可以解决这类问题呢?(抛开WebWorker不谈),那就是让代码异步 ...

  9. 浅谈Angular的 $q, defer, promise

    浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00  博客园-原创精华区 原文  http://www.cnblogs.com/big-snow/ ...

  10. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

随机推荐

  1. TP5--路由

    路由定义采用\think\Route类,通常是在应用的路由配置文件application/route.php进行注册 use think\Route; //路由规则 // Route::rule('/ ...

  2. pat乙级1011 A+B 和C

    #include<stdio.h> #include<stdlib.h> #include<string.h> #include<math.h> int ...

  3. HTML+CSS+JS制作一个灰白色简约时钟

    HTML+CSS+JS制作一个灰白色简约时钟 1. 效果图: 2. 特点:这次借鉴了网络上的代码,利用JS动态创建元素,减少html语句的数量,也便于与vue.react等语言进行结合. 3. 代码实 ...

  4. docker实战(8)使用docker-compose快速搭建zookeeper集群

    镜像下载 docker pull zookeeper 复制 zookeeper 集群的搭建 创建名为docker-compose.yml的文件 输入以下内容 version: '2' services ...

  5. pyhon&QT编译

    1.编译qrcpyrcc5 -o ico_rc.py ./ico/ico.qrc.qrc文件格式<RCC> <qresource prefix="/"> & ...

  6. 【MYSQL】group_concat长度问题分析

    今天在生产环境发现一个ArrayIndexOutOfBounds的问题,经过排查,发现是group_concat拼接的字符串太长,超过了1024,导致报错. 我们可以通过 : SET [SESSION ...

  7. pytorch学习笔记(8)--搭建简单的神经网络以及Sequential的使用

    1.神经网络图 输入图像是3通道的32×32的,先后经过卷积层(5×5的卷积核).最大池化层(2×2的池化核).卷积层(5×5的卷积核).最大池化层(2×2的池化核).卷积层(5×5的卷积核).最大池 ...

  8. 简单的WPF客户端应用开发

    1.使用vs创建一个新项目,选择wpf应用 2.创建好项目,在视图=>工具箱,选择要使用的部件 3.单击部件可以改变部件的显示信息,即content的内容就是显示的信息,name为部件的名称,在 ...

  9. 2020-2021第一学期2024"DCDD"小组第十一周讨论

    2020-2021第一学期"DCDD"第十一周讨论 小组名称:DCDD 小组成员:20202403孟凡斌.20202411陈书桓.20202416刘铭睿.20202420黄椿淇 照 ...

  10. HTML复习(17.表格样式)

    重点 掌握caption-side(表格标题位置) 掌握border-collapse(表格边框合并) 掌握border-spacing(表格边框间距) 表格标题位置在CSS中,我们可以使用capti ...