用es6实现一个符合Promise/A+规范的myPromise库

最新推荐文章于 2024-11-05 11:24:39 发布
最新推荐文章于 2024-11-05 11:24:39 发布
阅读量288 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5a5a3151f265da3e58594d8d
本文深入讲解Promise的工作原理，包括状态转换、链式调用、错误处理等核心概念，并通过实战案例展示如何实现自定义Promise库。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 简介

  1. Promise是异步编程async的一种解决方案;
  2. 使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观，避免回调地狱；
  3. 兼容低版本：$.Deferred 或 polyfill类库;

1.1 promise 三种状态

  1. Fulfilled 成功态
  2. Rejected 失败态
  3. Pending 初状态

1.2 promise 组成

  • 构造函数： new Promise
  • 实例方法： .then()、.catch()
  • 静态方法： Promise.resolve、Promise.reject、Promise.all、Promise.race;

1.3 promise 特点

  • 对象状态只由异步操作结果决定。
  • resolve方法会使Promise对象由pendding状态变Fulfilled状态；
  • reject方法或者异常会使得Promise对象由pendding状态变为rejected状态。
  • Promise状态变化只有这两条路径。
  • 对象状态一旦改变，任何时候都能得到这个结果。即状态一旦进入Fulfilled或者Rejected，promise便不再出现状态变化，同时我们再添加回调会立即得到结果。
  • 这跟事件不一样，事件是发生后再绑定监听，就监听不到了。

2. 原理

let p = new Promise((resolve, reject) => {
  if (Math.random() > 0.5) {
    resove();
  } else {
    reject();
  }
});
p.then(() => {
  //p的状态被resolved
}, () => {
  //p的状态被reject
});
复制代码
1. 调用Promise构造函数,构造实例；
    1.1 实例的三种状态：
        1) pending      （待定）
        2) fulfilled    （已执行） resolve
        3) rejected     （已拒绝） reject
        只有状态变成已完成（即fulfilled和rejected之一），才能触发对应状态的回调；
2. 构造函数的参数是个函数，此函数接受两个回调函数作为参数，分别为resolve和reject；
3. 在参数函数被执行的过程中：
    3.1 如果在其内部调用resolve，会将p的状态变成fulfilled;
    3.2 如果在其内部调用reject，会将p的状态变成rejected;
4. .then() 实例调用：
    4.1 then中，会为实例注册两种状态的回调函数；
    4.2 当实例的状态为fulfilled,  会触发第一个函数;
    4.3 当实例的状态为rejected,  会触发第一个函数;
    4.4 返回一个promise对象(链式调用)
    4.5 在注册状态的回调函数中：
        - 使用return: 改变.then返回的promise对象的状态，以及向后面.then注册的状态回调传递数据
        - 不使用return: 默认返回的promise对象resolve
5. .catch()
    5.1 注册rejected状态的回调函数;
    5.2 也是程序出错的回调；
    5.3 返回新的promise对象；
6. .resolve()
    6.1 返回一个fulfilled状态的promise对象;
7. .reject()
    7.1 返回一个rejected状态的promise对象;
复制代码

3. 自己动手实现一个Promise

3.1 基本版

  • 思路：
  1. 在判断状态为pending之后把状态改为相应的值；
  2. 把对应的value和reason存在self的data属性上面；
  3. 然后后执行相应的回调函数；
function Promise (executor) {
  var self = this;
  self.status = 'pending';
  self.data = undefined;
  self.onResolvedCallback = [];  //Promise resolved 回调函数集
  self.onRejectedCallback = [];

  function resolve (value) {
    if (self.status == 'pending') {
      self.status = 'fulfiled';
      self.data = value;
      self.onResolvedCallback.forEach(task => {
        task(self.data);
      })
    }
  }
  function reject (reason) {
    if (self.status == 'pending') {
      self.status = 'rejected';
      self.data = reason;
      self.onRejectedCallback.forEach(task => {
        task(self.data);
      })
    }
  }
复制代码

3.2 then方法

链式调用的特点:

  • 将then返回值作为下一次成功的回调函数的参数；

  • then 方法是用来注册在这个Promise状态确定后的回调；

  • 思路：

    1. 需要将then写在原型链prototype上；
    2. then返回一个新的Promise对象；
function  myPromise (executor) {
  var self = this;
  self.status = 'pending';
  self.value = undefined;
  self.reason = undefined;
  self.onResolvedCallbacks = [];
  self.onRejectedCallbacks = [];

  function resolve (value) {
    if (self.status == 'pending') {
      self.value = value;
      self.status = 'fulfilled';
      self.onResolvedCallbacks.forEach(task => task(value));
    }
  }
  function reject (reason) {
    if (self.status == 'pending') {
      self.status = 'rejected';
      self.reason = reason;
      self.onRejectedCallbacks.forEach(task => task(reason));
    }
  }
  try {
    executor(resolve, reject);
  } catch (err) {
    reject(err);
  }
}
myPromise.prototype.then = function (onFulfilled, onRejected) {
  let self = this;
  let promise2;
  if (self.status == 'fulfilled') {
    return promise2 = new myPromise((resolve, reject) => {
      try {
        var x = onFulfilled(self.value);
        if (x instanceof myPromise) {
          // 如果是个promise对象的话，调用then让函数执行;
          // 这个resolve，reject分别是promise2的成功和失败的回调；
          x.then(resolve, reject);  //这就相当于p2中resolve('promise')
        } else {
          resolve(x);
        }
      } catch (err) {
        reject(err);
      }
    })
  }

  if (self.status == 'rejected') {
    return promise2 = new myPromise((resolve, reject) => {
      try {
        var x = onRejected(self.reason);
        if (x instanceof myPromise) {
          x.then(resolve, reject);
        } else {
          resolve(x);  //注意这里也是resolve，失败的结果也会作为下一次then成功的参数
        }
      } catch (err) {
        reject(err);
      }
    })
  }

  if (self.status == 'pending') {
    return promise2 = new myPromise((resolve, reject) => {
      //因为这里还不知道pending会走向哪里，所以需要存储到回调函数集中
      self.onResolvedCallbacks.push(() => {
        var x = onFulfilled(self.value);
        if (x instanceof myPromise) {
          x.then(resolve, reject);
        } else {
          resolve(x);
        }
      })
      self.onRejectedCallbacks.push(() => {
        var x = onRejected(self.reason);
        if (x instanceof myPromise) {
          x.then(resolve, reject);
        } else {
          resolve(x);
        }
      })
    })
  }
};


module.exports = myPromise;
复制代码

调用代码

var myPromise = require('./myPromise.js');

var p1 = new myPromise((resolve, reject) => {
  /*if (Math.random > 0.5) {
    resolve(100);
  } else {
    reject('错了');
  }*/
  setTimeout(() => {
    resolve(100)
  },1000)
});

let p2 = p1.then((data) => {
  //return data + 100
  return new myPromise((resolve, reject) => {
    resolve('这是使用promise对象作为下次执行的结果');
  })
});

p2.then((data) => {
  console.log(data);
});

复制代码

3.3 Promise值的穿透

解决如下问题：

new Promise(resolve => resolve(8))
  .then()
  .catch()
  .then(value => console.log(value))
复制代码
解决方式：
onResolved = typeof onFulfilled === 'function' ? onFulfilled :  (value) => value;
onRejected = typeof onRejected === 'function' ? onRejected : (reason) => throw reason;
复制代码

3.4 catch方法

'.'

catch方法是then(onFulfilled, onRejected) 方法当中 onRejected 函数的一个简单的写法

即Promise.prototype.catch 是 Promise.then(null,reject)的别名

p.catch(function(err) { // todo ... })
等价于
p.then(null, function(err) {//to do ...})

复制代码

.'.

myPromise.prototype.catch = function (func) {
  return this.then(null, func);
}
复制代码

3.5 与其它Promise库结合

'.'

  • 不同的Promise实现之间需要无缝的可交互；
  • 如我们自己实现的Promise，与ES6的Promise，以及其它的Promise库，应该能够无缝相互调用的；
var myPromise = require('./myPromise.js');

var p1 = new myPromise((resolve, reject) => {
  resolve(100);
});

let p2 = p1.then((data) => {
  return new Promise((resolve, reject) => {  //使用原生的Promise
    resolve('123');     
  });
});
p2.then((data) => {
  console.log(data); //结果是 Promise { '123' }
});
复制代码

.'.

  1. 将所有判断返回值是否为Promise对象的地方，改写成：
/* if (x instanceof myPromise) {
    x.then(resolve, reject);
} else {
    resolve(x);
}  */

改写成：
resolvePromise(promise2, x, resolve, reject);
复制代码

实现resolvePromise

思路： 将返回的Promise不断的执行，直到失败或者返回一个普通的值

/**
 * promise2 一个新的、自定义的、myPromise对象
 * x  then方法返回的结果 有可能是普通的值，也有可能是promise对象
 * resolve 成功的回调
 * reject 失败的回调
 * */
function resolvePromise (promise2, x, resolve, reject) {
  if (promise2 === x) {
    throw new Error('两个对象不能来自同一个引用！！！');
  }
  if ((x != null) && (typeof x === 'function') || (typeof x === 'object')) {
    let then = x.then;
    if (typeof then === 'function') {
      then.call(x, (value) => {
        //这里value也有可能是个promise, 所以需要进行递归
        resolvePromise (promise2, value, resolve, reject)
      }, (reason) => {
        reject(reason);
      })
    }
  } else {
    resolve(x);
  }
}
复制代码

3.6 Promise.all

  • 同样返回一个新的Promise对象；
  • 可以传入多个promise,可以是数组或对象，但必须是可以迭代的；
  • 全部执行完成会将结果以数组的方式返回(按传入顺序，按顺序返回结果)；
  • 如果有一个失败了就失败了，即一旦其中一个promise出错，整个promise会被reject；
var myPromise = require('./myPromise.js');
var p1 = new myPromise((resolve, reject) => {
  setTimeout(() => {
    // resolve(1);
    reject('错了')
  },3000)
});

var p2 = new myPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(2);
  },1000)
});

myPromise.all([
  p1,
  p2
]).then((value) => {
  console.log(value);
}, (reason) => {
  console.log(reason);
});

// 注意：以上异步不是4s后才返回结果，而是3s就返回结果
复制代码
myPromise.all = function (promises) {
  return new Promise((resolve, reject) => {
    let res = [];
    let nIndex = 0; //完成所有promise任务的计数器
    let resolved = (idx) => {
      return (data) => {
        res[idx] = data;
        nIndex++;
        if (nIndex === promises.length) {
          resolve(res);  //抛出结果
        }
      }
    };

    promises.forEach((promise, idx) => {
      promise.then(resolved(idx), (reason) => reject(reason)); //有一个失败，就立即reject
    })
  });
}
复制代码

3.7 Promise.race

  • 同样返回一个新的Promise对象
  • 可以传入多个promise；
  • 参数数组中，一个promise对象状态改变,则这个新的Promise对象的状态也转化为该状态
var p1 = new myPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  },5000)
});

var p2 = new myPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(2);
  },1000)
});

var p3 = new myPromise((resolve, reject) => {
  setTimeout(() => {
    reject(3);
  },500)
});

myPromise.race([
  p1,
  p2,
  p3
]).then((value) => {
  console.log(value);
}, (reason) => {
  console.log(reason);
});

复制代码

3.8 Promise.resolve

  • 是Promise.resolve(value)的快捷方式；
是以下代码的语法糖
new Promise((resolve) => {
    resolve(10)
});

再如：
var obj = {
  then: (resolve) => resolve('执行了')
};

var resolved = Promise.resolve(obj);
==> 等价的
var resolved = new Promise((resolve, reject) => {
  obj.then(resolve, reject);
});

resolved.then((str) => {
  console.log(str)
});
复制代码
  • 即将状态立即转换为fulfilled状态，执行onFulfilled函数；
  • 同样返回一个新的Promise对象
myPromise.resolve(10).then((value) => {
  console.log(value);
})
复制代码
myPromise.resolve = function (value) {
  return new myPromise((resolve, reject) => {
    if (value && (typeof value === 'function') || (typeof value === 'object')) {
      value.then(resolve, reject);
    } else {
      resolve(value);
    }
  })
}

复制代码

3.9 Promise.reject

  • 同样返回一个新的Promise对象
Promise.reject('错了').catch(function(result) {
    console.log(result);
});;
p
复制代码
myPromise.reject = function (value) {
  return new myPromise((resolve, reject) => {
    reject(value);
  });
};
复制代码

应用场景

  1. 实际工作中使用promise进行了后台数据模拟；
  2. Promise.all，在不同的接口请求数据然后拼合成自己所需的数据，通常这些接口之间没有关联；
  3. 网页中预加载20张图片资源，分步加载，一次加载10张，两次完成，怎么控制图片请求的并发，怎样感知当前异步请求是否已完成？
前端：一篇彻底搞懂Ajax,Promise,JQuery Ajax,Axios的差异(区别)
GIS摆渡人
04-28 1842
文章目录一. AJAX原理1.ajax 有那些优缺点?二. Promise封装Ajaxpromise 封装实现三. JQuery Ajax1.优缺点：四. Axios1.优缺点：五. Fetch1.优缺点：补充：为什么要用axios? 一. AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。 Ajax的过程只涉及Ja
实现一个完美符合Promise/A+规范的Promise
liwusen的博客
04-09 2064
简要介绍：Promise允许我们通过链式调用的方式来解决“回调地狱”的问题，特别是在异步过程中，通过Promise可以保证代码的整洁性和可读性。本文主要解读Promise/A+规范，并在此规范的基础上，自己实现一个Promise. 一、Promise的使用 在了解Promise规范之前，我们知道主流的高版本浏览器已经支持ECMA中的Promise. 创建一个promise实例： var...
ajax和Promise
Bb77_的博客
03-21 564
回调地狱、Promise、async/await、跨域、事件循环
AJAX和Promise
weixin_45128368的博客
05-04 1261
概念：Ajax是异步JS和XML的缩写，它是一种动态创建网页的技术。作用：它能够在不刷新整个页面的情况下，通过JS异步向服务器请求数据，异步加载和更新部分页面内容，说提高用户体验，动态加载数据，表单验证和提交等。Ajax一般使用XmlHttpRequest来实现异步通信，也可以使用Fetch API或者JQuery来实现。2. 为什么要用Ajax？(简述Ajax的优点）Ajax的核心是JS对象XmlHttpRequest,它是一种支持异步请求技术。
promise跟ajax区别,Promise和AJAX有什么区别？
weixin_29063035的博客
08-05 3797
jfriend00..66你对promises和Ajax调用感到困惑.它们有点像苹果和刀子.你可以用刀切苹果,刀是一种可以应用于苹果的工具,但两者是非常不同的东西.Promise是一种管理异步操作的工具.它们跟踪异步操作何时完成以及它们的结果是什么,并让您与其他代码或其他异步操作协调完成和那些结果(包括错误条件).它们本身并不是异步操作.Ajax调用是一种特定的异步操作,可以与传统的回调接口一起使...
ajax 与 promise
yuyezhilv的博客
05-09 817
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    &
手写一个Promise/A+,完美通过官方872个测试用例
dennis_jiang的博客
04-08 1779
前段时间我用两篇文章深入讲解了异步的概念和Event Loop的底层原理，然后还讲了一种自己实现异步的发布订阅模式： setTimeout和setImmediate到底谁先执行，本文让你彻底理解Event Loop 从发布订阅模式入手读懂Node.js的EventEmitter源码 本文会讲解另一种更现代的异步实现方案：Promise。Promise几乎是面试必考点，所以我们不能仅仅会用，还得知道...
实现JavaScript Promise机制的自定义MyPromise类
在实现MyPromise时，需要考虑到如何返回一个新的Promise对象以支持链式调用，以及如何处理前一个then回调的返回值。 8. 代码组织和模块化： 对于一个包含main.js的压缩包子文件，需要考虑到代码的组织和模块化。...
promise-library:承诺库的实现
06-16
下面我们将深入探讨Promise的核心概念、基本用法以及如何实现一个简单的Promise库。 Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。当Promise被创建时，它的状态默认为pending...
深入理解Promise：如何手动实现一个Promise
Promise是ES6规范中的一个对象，它用于处理异步操作，并提供了一种链式调用的方法来处理异步结果。Promise主要有三种状态： - pending：初始状态，既不是成功，也不是失败。 - fulfilled：意味着操作成功完成。 -...
javascript-前后端交互-异步调用Ajax与Promise比较
gaogzhen的博客
07-26 1195
javascript-前后端交互-异步调用Ajax与Promise比较 目录 文章目录1、异步调用1.1、使用场景1.2、Ajax使用1.2.1、启动后台1.2.2、编写前端测试页面1.3、多次异步调用的依赖分析2、Promise简介***后记*** ： 内容 1、异步调用 1.1、使用场景 定时任务 Ajax 时间函数 1.2、Ajax使用 1.2.1、启动后台 这里我们使用基于nodojs的express简单搭建一个后台环境，使用nodemon热部署前端项目。 简单的index.js代
关于 AJAX 与 Promise
最新发布
小赵的博客
11-05 1110
AJAX是一种异步传输数据的技术，允许网页在不重新加载整个页面的情况下更新部分内容，提高了用户体验和性能。Promise是一种处理异步操作的方式，通过链式调用和统一的错误处理机制，使得异步代码更加清晰和易于管理。结合使用：在现代前端开发中，通常会结合使用 AJAX 和 Promise 来处理异步请求，以提高代码的可读性和可维护性。
Ajax、Promise、Axios前端三剑客
devops
05-19 5352
Ajax是一种用于实现异步通信的技术，Promise是一种用于处理异步操作的对象，而Axios则是一个基于Promise的HTTP客户端， 用于发送HTTP请求。它们的出现都是为了在Web开发中更好地处理异步操作和网络请求。系统性的学习这三项技术有助于提高你对前端技术的掌握。
AJAX——Promise-链式调用
weixin_48719464的博客
04-23 1190
概念：依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，知道结束细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果好处：通过链式调用，解决回调函数嵌套问题。
promise axios ajax 的区别
频繁记录
06-08 771
promise、axios、ajax的区别
AJAX-Promise 详解
来自想要赚大钱的小周同学
07-27 1258
学习目标：了解ajax中的Promise
Promise基本使用 ，promise 与 Ajax封装
Allen的博客
11-29 684
btn.addEventListener('click',function(){//添加点击事件。//第一个回调函数onResolved()是Promise对象的状态变为resolved时调用。//第二个回调函数onRejected()是Promise对象的状态变为rejected时调用。//这两个函数都是可选的，不一定要提供。setTimeout(()=>{ //包裹一个异步操作。对象用来封装一个异步操作并可以获取其成功/失败的结果值。//then方法可以接受两个回调函数作为参数。这几个方法，原型上有。
Promise实现ajax简单应用
weixin_37823121的博客
09-22 1306
Promise是异步编程的一种解决方案。   比传统的解决方案——————回调函数和事件，Promise更合理和更强大。 在ES6规范中，Promise是提供的一个构造函数，可以new Promise（）对象 Promise对象代表一个异步操作， Promise有三种状态： pending（进行中） fulfilled（已成功） rejected（已失败） Promise构造函数接...
实现Promise/A+规范的ES6兼容Promise库
'modulex-promise' 是一个实现了 Promise/A+ 规范的模块，允许开发者在代码中使用 Promise 对象。 - `readFilePromisified('config.json')` `readFilePromisified` 函数很可能是封装了 `fs.readFile` 的 Promise ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值