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

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

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

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

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>
  13. 为什么我们的手写的promise返回来的仅仅只有undefined;
  14. 没有状态,因为我们现在手写的promise什么都没有返回来哈

5.我们现在封装的代码

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

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

补充的图片,便于理解

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

手写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之常用API

    API概述 什么是API API (Application Programming Interface) :应用程序编程接口 java中的API 指的就是 JDK 中提供的各种功能的 Java类,这些 ...

  2. 错误提示:Access denied for user 'GC'@'localhost' (using password: YES)

    错误描述:使用的是C3P0连接池 Spring整合Mybatis时出现错误 java.sql.SQLException: Access denied for user 'GC'@'localhost' ...

  3. 自己挖的坑自己填--jxl进行Excel下载堆内存溢出问题

    今天在进行使用 jxl 进行 Excel 下载时,由于数据量大(4万多条接近5万条数据的下载),数据结构过于负责,存在大量大对象(虽然在对象每次用完都设置为null,但还是存在内存溢出问题),加上本地 ...

  4. PReact10.5.13源码理解

    React源码看过几次,每次都没有坚持下来,索性学习一下PReact部分,网上讲解源码的不少,但是基本已经过时,所以自己来梳理下 render.js部分 import { EMPTY_OBJ, EMP ...

  5. 文件连接--ln

    ln -n file1 file2  将文件2设置为文件1的软连接:file1和file2 任何一个改动都会反馈到另一方,删除源文件, 软连接文件不可用 ln -s file1 file2  将文件2 ...

  6. [Azure Devops] 使用 Azure Pipelines 实现 CI

    1. 什么是 Azure Pipelines Azure Pipelines 会自动构建和测试代码项目,以将其提供给其他人.它适用于任何语言或项目类型.Azure Pipelines 结合了持续集成 ...

  7. 铁人三项(第五赛区)_2018_seven

    铁人三项(第五赛区)_2018_seven 先来看看保护 保护全开,IDA分析 首先申请了mmap两个随机地址的空间,一个为rwx,一个为rw 读入的都shellcode长度小于等于7,且这7个字符不 ...

  8. 《深入理解计算机系统》学习笔记整理(CSAPP 学习笔记)

    简介 本笔记目前已包含 CSAPP 中除第四章(处理器部分)外的其他各章节,但部分章节的笔记尚未整理完全.未整理完成的部分包括:ch3.ch11.ch12 的后面几小节:ch5 的大部分. 我在整理笔 ...

  9. Css预编语言以及区别

    一.是什么 Css 作为一门标记性语言,语法相对简单,对使用者的要求较低,但同时也带来一些问题 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺 ...

  10. 这种ERP系统核查工作实际是在做无用功

    前段时间跟朋友聊起他们公司持续了好几年的ERP核查工作,此时他正在一家分公司做核查.ERP核查工作我是知道的,一个季度一次,每个模块出一个人去子公司巡回巡查,主要核查ERP系统的使用情况. 核查工作主 ...