1. Promise中then()方法返回来的结果或者规律

  1. 我们知道 promise 的 then 方法返回来的结果值[result]是由：
  3. 它指定的回调函数的结果决定的

2.比如说下面这一段代码

  1. let p = new Promise((resolve, reject) => {
  2.     resolve('ok');
  3. })
  5. const result= p.then(res => {
  6.     alert(res)
  7. }, err => {
  8.     console.log(err)
  9. })
  11. 也就是说result的结果值：是下面这一段代码决定的
  12. 也就是回调函数返回来的结果决定的
  13. res => {
  14.     alert(res);//此时它返回来的是非Promise类型。
  15. }
  17. 如果说:它返回的的是非Promise类型的数据,如undefined; 数字，字符串。
  18. 那么 result就是一个成功的Promise;
  19. 如果你没有返回来，result值应该为undefined;
  20. 如果你返回来值了，那么result的值就是你返回来的值
  22. 如果说:它返回来的是一个Promise，
  23. 你返回来的promise就决定了then方法返回来的Promise的结果和状态；
  25. 如果大家觉得这个有一点不好理解；看这个图

3.用代码说明

  1.  <script>
  2.         let p = new Promise((resolve, reject) => {
  3.             resolve('ok');
  4.         })
  5.         const result = p.then(res => {
  6.             // 这里返回出去的是一个非Promise类型；
  7.             // 根据上面的内容，result是一个成功的Promise,它的结果就是你返回去的值；
  8.             // 这里由于你什么都没有返回，所以是一个undefined
  9.             console.log('res', res)
  10.         }, err => {
  11.             console.log(err)
  12.         })
  13.         console.log('result', result)
  14.     </script>

4 我们现在定义返回来的结果

  1. <script src="./Promise.js"></script>
  2. <script>
  3.     let p = new Promise((resolve, reject) => {
  4.         resolve('ok');
  5.     })
  6.     const result = p.then(res => {
  7.         console.log('res', res) //输出 res ok
  8.     }, err => {
  9.         console.log(err)
  10.     })
  11.     console.log('result', result)//输出 result undefined
  12. </script>
  14. 为什么我们的手写的promise返回来的仅仅只有undefined;
  15. 没有状态，因为我们现在手写的promise什么都没有返回来哈

5.我们现在封装的代码

6 先处理回调函数返回的是一个非promise
  1. 添加返回的是一个Promise对象
  2. return new Promise((resolve,reject)=>{ })
  4. // 获取回调函数的执行结果
  5. let chenggong= onResolve(this.PromiseValue);
  7. 然后返回对应的结果
  9. 接受返回来的
  1. <script src="./Promise.js"></script>
  2. <script>
  3.     let p = new Promise((resolve, reject) => {
  4.         resolve('ok');
  5.     })
  6.     const result = p.then(res => {
  7.        // 这里我们的代码返回出去的是一个非Promise类型；
  8.        // 根据上面的内容，result是一个成功的Promise,它的结果就是你返回去的值；
  9.        // 这里由于你什么都没有返回，所以是一个undefined
  10.         console.log('res', res)
  12.         //return 'ok'
  13.     }, err => {
  14.         console.log(err)
  15.     })
  16.     console.log('result', result)
  17. </script>
  1. function Promise(executor) {
  2.   const self = this;
  3.   function resolve(data) {
  4.     // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
  5.     if (self.PromiseStatus !== "pending") return;
  6.     self.PromiseStatus = "resolved";
  7.     self.PromiseValue = data;
  9.     // 调用成功的回调函数进行遍历
  10.     self.callBack.forEach((item) => {
  11.       item.onResolve(data);
  12.     });
  13.   }
  14.   // 同样声明成为一个函数;修改状态
  15.   function reject(err) {
  16.     // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
  17.     if (self.PromiseStatus !== "pending") return;
  18.     self.PromiseStatus = "rejected";
  19.     self.PromiseValue = err;
  20.     // 调用失败的回调函数数进行遍历
  21.     self.callBack.forEach((item) => {
  22.       item.onReject(err);
  23.     });
  24.   }
  25.   this.PromiseStatus = "pending";
  26.   this.PromiseValue = null;
  27.   // 声明属性 new  add
  28.   this.callBack = [];
  29.   // 对异常进行处理；使用try catch
  30.   try {
  31.     executor(resolve, reject);
  32.   } catch (err) {
  33.     reject(err);
  34.   }
  35. }
  36. // 自定义封装then方法执行回调
  37. Promise.prototype.then = function (onResolve, onReject) {
  38.     // 返回一个promise对象
  39.     return new Promise((resolve,reject)=>{
  40.         if (this.PromiseStatus === "resolved") {
  41.             // 获取回调函数的执行结果
  42.           let chenggong= onResolve(this.PromiseValue);
  44.           if(chenggong instanceof Promise){
  45.               //
  46.           }else{
  47.             // 不是Promise类型的对象
  48.             // 结果的对象状态【成功】
  49.             resolve(chenggong)
  50.           }
  52.         }
  53.         if (this.PromiseStatus === "rejected") {
  54.             onReject(this.PromiseValue);
  55.         }
  56.         // 如果是pending的状态
  57.         if (this.PromiseStatus === "pending") {
  58.             // 这个是保存回调函数
  59.             this.callBack.push({
  60.             onResolve: onResolve,
  61.             onReject: onReject,
  62.             });
  63.         }
  64.     })
  66. };

返回的值是undefined

返回的值是ok

7.处理回调函数返回的是一个promise类型的

  1.  <script src="./Promise.js"></script>
  2.     <script>
  3.         let p = new Promise((resolve, reject) => {
  4.             resolve('ok');
  5.         })
  6.         const result = p.then(res => {
  7.             // 返回的是一个非promise类型的；由于什么都没有返回，它的结果值应该是一个undefined
  8.             // console.log('res', res)
  10.             // 返回的是一个非promise类型的；返回的应该是一个ok
  11.             // return 'ok'
  13.             // 返回的是一个Promise类型的，
  14.             // 你返回来的promise就决定了then方法返回来的Priose的结果和状态
  15.             // 此时我们返回的是成功状态，结果是（我是成功的）
  16.             return new Promise((resolve, reject) => {
  17.                 resolve('我是成功的');
  18.             })
  19.         }, err => {
  20.             console.log(err)
  21.         })
  22.         console.log('result', result)
  23.     </script>
  1. function Promise(executor) {
  2.   const self = this;
  3.   function resolve(data) {
  4.     // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
  5.     if (self.PromiseStatus !== "pending") return;
  6.     self.PromiseStatus = "resolved";
  7.     self.PromiseValue = data;
  9.     // 调用成功的回调函数进行遍历
  10.     self.callBack.forEach((item) => {
  11.       item.onResolve(data);
  12.     });
  13.   }
  14.   // 同样声明成为一个函数;修改状态
  15.   function reject(err) {
  16.     // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
  17.     if (self.PromiseStatus !== "pending") return;
  18.     self.PromiseStatus = "rejected";
  19.     self.PromiseValue = err;
  20.     // 调用失败的回调函数数进行遍历
  21.     self.callBack.forEach((item) => {
  22.       item.onReject(err);
  23.     });
  24.   }
  25.   this.PromiseStatus = "pending";
  26.   this.PromiseValue = null;
  27.   // 声明属性 new  add
  28.   this.callBack = [];
  29.   // 对异常进行处理；使用try catch
  30.   try {
  31.     executor(resolve, reject);
  32.   } catch (err) {
  33.     reject(err);
  34.   }
  35. }
  36. // 自定义封装then方法执行回调
  37. Promise.prototype.then = function (onResolve, onReject) {
  38.     // 返回一个promise对象
  39.     return new Promise((resolve,reject)=>{
  40.         if (this.PromiseStatus === "resolved") {
  41.             // 获取回调函数的执行结果
  42.           let chenggong= onResolve(this.PromiseValue);
  44.           if(chenggong instanceof Promise){
  45.             // 如果你是一个Promise,那么可以去调用这个then方法
  46.             chenggong.then(v=>{
  47.                 resolve(v);
  48.             },r=>{
  49.                 reject(r);
  50.             })
  51.           }else{
  52.             // 不是Promise类型的对象
  53.             // 结果的对象状态【成功】
  54.             resolve(chenggong)
  55.           }
  57.         }
  58.         if (this.PromiseStatus === "rejected") {
  59.             onReject(this.PromiseValue);
  60.         }
  61.         // 如果是pending的状态
  62.         if (this.PromiseStatus === "pending") {
  63.             // 这个是保存回调函数
  64.             this.callBack.push({
  65.             onResolve: onResolve,
  66.             onReject: onReject,
  67.             });
  68.         }
  69.     })
  70. };

补充的图片，便于理解

8抛出异常处理

  1.    <script src="./Promise.js"></script>
  2.     <script>
  3.         let p = new Promise((resolve, reject) => {
  4.             resolve('ok');
  5.         })
  6.         const result = p.then(res => {
  7.             // 返回的是一个非promise类型的；由于什么都没有返回，它的结果值应该是一个undefined
  8.             // console.log('res', res)
  10.             // 返回的是一个非promise类型的；返回的应该是一个ok
  11.             // return 'ok'
  13.             // 返回的是一个Promise类型的，
  14.             // 你返回来的promise就决定了then方法返回来的Priose的结果和状态
  15.             // 此时我们返回的是成功状态，结果是（我是成功的）
  16.             // return new Promise((resolve, reject) => {
  17.             //     resolve('我是成功的');
  18.             // })
  20.             // 抛出异常
  21.             throw 'err info'
  22.         }, err => {
  23.             console.log(err)
  24.         })
  25.         console.log('result', result)
  26.     </script>
  1. function Promise(executor) {
  2.   const self = this;
  3.   function resolve(data) {
  4.     // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
  5.     if (self.PromiseStatus !== "pending") return;
  6.     self.PromiseStatus = "resolved";
  7.     self.PromiseValue = data;
  9.     // 调用成功的回调函数进行遍历
  10.     self.callBack.forEach((item) => {
  11.       item.onResolve(data);
  12.     });
  13.   }
  14.   // 同样声明成为一个函数;修改状态
  15.   function reject(err) {
  16.     // 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
  17.     if (self.PromiseStatus !== "pending") return;
  18.     self.PromiseStatus = "rejected";
  19.     self.PromiseValue = err;
  20.     // 调用失败的回调函数数进行遍历
  21.     self.callBack.forEach((item) => {
  22.       item.onReject(err);
  23.     });
  24.   }
  25.   this.PromiseStatus = "pending";
  26.   this.PromiseValue = null;
  27.   // 声明属性 new  add
  28.   this.callBack = [];
  29.   // 对异常进行处理；使用try catch
  30.   try {
  31.     executor(resolve, reject);
  32.   } catch (err) {
  33.     reject(err);
  34.   }
  35. }
  36. // 自定义封装then方法执行回调
  37. Promise.prototype.then = function (onResolve, onReject) {
  38.     // 返回一个promise对象
  39.     return new Promise((resolve,reject)=>{
  40.         if (this.PromiseStatus === "resolved") {
  41.             try{
  42.                 let chenggong= onResolve(this.PromiseValue);
  43.                 if(chenggong instanceof Promise){
  44.                     // 如果你是一个Promise,那么可以去调用这个then方法
  45.                     chenggong.then(v=>{
  46.                         resolve(v);
  47.                     },r=>{
  48.                         reject(r);
  49.                     })
  50.                 }else{
  51.                     // 不是Promise类型的对象
  52.                     // 结果的对象状态【成功】
  53.                     resolve(chenggong)
  54.                 }
  55.             }catch(e){
  56.                 reject(e);
  57.             }
  58.             // 获取回调函数的执行结果
  59.         }
  60.         if (this.PromiseStatus === "rejected") {
  61.             onReject(this.PromiseValue);
  62.         }
  63.         // 如果是pending的状态
  64.         if (this.PromiseStatus === "pending") {
  65.             // 这个是保存回调函数
  66.             this.callBack.push({
  67.             onResolve: onResolve,
  68.             onReject: onReject,
  69.             });
  70.         }
  71.     })
  72. };

手写Promise中then方法返回的结果或者规律的更多相关文章

  1. 手写Promise A+ 规范

    基于ES6语法手写promise A+ 规范,源码实现 class Promise { constructor(excutorCallBack) { this.status = 'pending'; ...

  2. 手写 Promise 符合 Promise/A+规范

    异步编程是前端开发者必需的技能,过去管理异步的主要机制都是通过函数回调,然而会出现像“回调地狱”这样的问题.为了更好的管理回调,ES6 增加了一个新的特性 Promise.Promise 是 ES7 ...

  3. 手写promise

    写在前面: 在目前的前端分开中,我们对于异步方法的使用越来越频繁,那么如果处理异步方法的返回结果,如果优雅的进行异步处理对于一个合格的前端开发者而言就显得尤为重要,其中在面试中被问道最多的就是对Pro ...

  4. 手写Promise看着一篇就足够了

    目录 概要 博客思路 API的特性与手写源码 构造函数 then catch Promise.resolved Promise.rejected Promise.all Promise.race 概要 ...

  5. 前端面试题之手写promise

    前端面试题之Promise问题 前言 在我们日常开发中会遇到很多异步的情况,比如涉及到 网络请求(ajax,axios等),定时器这些,对于这些异步操作我们如果需要拿到他们操作后的结果,就需要使用到回 ...

  6. Shell中处理方法返回值问题

    同步发表:http://blog.hacktons.cn/2017/12/13/shell-func-return/ 背景 通过shell编程,写一些工具批处理的时候,经常需要自定义函数.更复杂点的情 ...

  7. 关于js中splice方法返回的结果

    一.前言 刚刚在使用splice()方法,发现这个方法返回的是删除后的数组元素,如果要获取删除指定元素后的数组,直接调用原来的数组即可!因为splice()会改变原来数组!之前对splice()方法一 ...

  8. TensorFlow实现Softmax Regression识别手写数字中"TimeoutError: [WinError 10060] 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败”问题

    出现问题: 在使用TensorFlow实现MNIST手写数字识别时,出现"TimeoutError: [WinError 10060] 由于连接方在一段时间后没有正确答复或连接的主机没有反应 ...

  9. JdbcTemplate中queryForObject方法返回空结果或不正确结果数量的解决方法

    在使用Spirng提供的JdbcTemplate中名为queryForObject API进行数据库查询时有时会抛出如下异常: org.springframework.dao.EmptyResultD ...

随机推荐

  1. 图文详解Java对象内存布局

    作为一名Java程序员,我们在日常工作中使用这款面向对象的编程语言时,做的最频繁的操作大概就是去创建一个个的对象了.对象的创建方式虽然有很多,可以通过new.反射.clone.反序列化等不同方式来创建 ...

  2. 亲自动手实现Python+pygame中国象棋游戏

    功能1:实现游戏整体界面显示 一.创建基本的结构 代码如下: import time import pygame def main(): # 初始化pygame pygame.init() # 创建用 ...

  3. MacBook读写移动硬盘

    在MacBook上插入移动硬盘,只能读取,不能写入.这是因为移动硬盘的格式是NTFS,MacBook不支持写入,有三种方法: 1. 改变移动硬盘的格式,格式化为可以读写的exFAT等格式,但存储的文件 ...

  4. [图论]牛的旅行 Cow Tours :Floyed-Warshall

    牛的旅行 Cow Tours 目录 牛的旅行 Cow Tours 题目描述 输入格式 输出格式 输入输出样例 输入 #1 输出 #1 解析 代码 题目描述 农民 John的农场里有很多牧区.有的路径连 ...

  5. Distributed | Raft

    1. 复制状态机 一致性算法是在复制状态机的背景下产生的.在这种方法下,一组服务器的状态机计算相同状态的相同副本,即使某些服务器宕机,也可以继续运行. 复制状态机通常使用复制日志实现,每个服务器存储一 ...

  6. kubectl cp 从k8s pod 中 拷贝 文件到本地

    请查看官方的说明 kubectl cp --help 官方说使用cp , pod里需要有tar命令 从k8s pod 中 拷贝 文件到本地 这是我使用的命令 kubectl exec redis-6c ...

  7. 使用IDEA模拟git命令使用的常见场景

    目录 使用IDEA模拟git命令使用的常见场景 前期准备 新建一个远程仓库 在一个文件夹内建立两个子文件夹作为两个本地仓库的存放位置 本地仓库与远程仓库建立联系 模拟两个用户协同开发的场景(使用IDE ...

  8. boltdb的实现和改进

    整个代码不是很复杂,可以从代码中理解如何实现. 特点:btree,很小巧,但实现了完整事务机制,稳定,即使丢电也不会导致数据库错误. 整个结构如下: meta page (前两页) --- > ...

  9. DexHunter在Dalvik虚拟机模式下的脱壳原理分析

    本文博客地址:http://blog.csdn.net/qq1084283172/article/details/78494671 在前面的博客<DexHunter的原理分析和使用说明(一)&g ...

  10. hdu4923 f(A,B)分段处理

    题意:        给你序列A,让你构造序列B然后求出最小的f(A <B),其中A 是0,或者1组成的,而B是[0,1]的实数,f(A,B) = 求和(i从1到n) (Ai - Bi)^ 2. ...