几行代码就让你彻底明白promise的原理

最新推荐文章于 2024-02-19 08:57:17 发布
最新推荐文章于 2024-02-19 08:57:17 发布
阅读量266 收藏
点赞数
原文链接：https://juejin.im/post/5af7de8df265da0ba469e146
版权

今天带大家了解一个神器，promise， promise所解决的问题有哪些？

  1. 解决回调地狱(多个ajax嵌套);
  2. 解决并发异步(同一时刻内获取并发的结果);
  3. 链式调用。

1. 什么是promise

promise 分为3种状态，分别是：

  • pendding:初始状态，既不是成功，也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

2.promise的使用

promise是一个类，内置的类，使用方式是new Promise(),里面有一个参数executor，executor有两个参数resolve，rejected，promise必须有方法then，then有两个参数onFulfilled, onRejected。

2.1 参数

let p = new Promise((resolve,reject)=>{
  //有一个参数叫executor，executor有两个参数resolve，对应的状态fulfilled操作成功完成，rejected操作失败
});
p.then(onFulfilled, onRejected){
    //有两个参数onFulfilled, onRejected
}
复制代码

2.2 promise的基本使用方法

2.2.1情况1：
let p = new Promise((resolve, reject)=> {
    resolve('林俊杰');
});
p.then(data=>{
    console.log(data);//'林俊杰'
},err=>{
    console.log(err);
})
复制代码
  • 上面例子走的是成功时的内容，而输出的data是resolve的参数
2.2.2情况2：
let p = new Promise((resolve, reject)=> {
    reject('周杰伦');
    resolve('林俊杰');
});
p.then(data=>{
    console.log(data);
},err=>{
    console.log(err);//'周杰伦'
})
复制代码
  • 上面例子走到失败的内容，同样输出的是reject的参数，不同的是promise中同时存在reject();resolve();时，走的是放在前面的一个状态，只要走了失败就不会走成功（只要走了成功就不会走失败）
2.2.3情况3
let p = new Promise((resolve, reject)=> {
    throw new Error('林俊杰');
});
p.then(data=>{
    console.log('d',data);
},err=>{
    console.log('e',err);//e Error: 林俊杰
})
复制代码
  • 上面例子，抛出错误时，同样走到了reject，所以当抛错时也会走到reject，并不会报错。。。（模拟时可以使用try...catch）

接下来是模拟手写的promise（根据promise a+）

class MyPromise {
  constructor(executor) {//参数executor放在constructor中
    // 默认状态是等待态
    this.status = 'pending';
    this.value = undefined;//成功的参数
    this.reason = undefined;//失败的参数
    let resolve = (data) => {//注意this，最好用es6箭头函数
      if (this.status === 'pending') {//只有当状态是pending时才会执行，下同
        this.value = data;
        this.status = 'fulfilled';
      }
    }
    let reject = (reason) => {
      if (this.status === 'pending') {
        this.reason = reason;
        this.status = 'rejected';
      }
    }
    try { // 执行时可能会发生异常eg:throw new Error();
      executor(resolve, reject);//executor是promise参数，executor有两个自己的参数
    } catch (e) {
      reject(e); // promise失败了
    }
  }
  then(onFulFilled, onRejected) {
    if (this.status === 'fulfilled') {
      onFulFilled(this.value);
    }
    if (this.status === 'rejected') {
      onRejected(this.reason);
    }
  }
}
module.exports = Promise;
复制代码
  • 上面是最简单的一个实现，那么问题来了，如果，在我的promise中有一个异步的，比如定时器
let p = new Promise((resolve, reject)=> {
    setTimeout(()=>{
        reject('林俊杰');
      },1000)
});
p.then(data=>{
    console.log('d',data);
},err=>{
    console.log('e',err);//e : 林俊杰
})
复制代码
  • 内置的promise会等到定时器1s执行完以后再执行 then，而此时我们自己完成的MyPromise是不会输出任何，原因在于，then要先于异步的定时器执行，而此时的then的状态是pending，所以不会走then的任何状态。所以我们需要把then的成功的函数与失败的函数分别用数组存储起来。onResolvedCallbacks=[],onRejectedCallbacks=[],放在实例上,所以当状态是pending时，存起来
if(this.status === "pending") {
    //相当于发布订阅
    this.onResolvedCallbacks.push(()=>{
        onFulFilled(this.value);
    })
    this.onResolvedCallbacks.push(()=>{
        onRejected(this.reason);
    })
}
复制代码
  • 相当于发布订阅模式，只有以下状态改变的时候调用
let resolve = (data)=>{
    if(this.status === 'pending') {
        this.value = data;
        this.status = 'fulfilled';
        this.onResolvedCallbacks.forEach(fn=>fn());
    } 
}
let reject = (err)=>{
    if(this.status === 'pending') {
        this.reason = err;
        this.status = 'rejected';
        this.onRejectedCallbacks.forEach(fn=>fn());
    }
}
复制代码
  • 以上是基本的实现，那最主要的还是promise的链式调用。

2.3 promise的链式调用方法

let p = new Promise((resolve, reject) => {
  resolve();
});
p.then((data) => {
  // return new Promise((resolve,reject)=>{
  //   resolve(new Promise((resolve,reject)=>{
  //     reject('1234565');
  //   }))
  // })//返回值是promise，会取promise的返回结果作为外层下一次then的参数
  return 123;//返回值是普通值，直接把值作为外层下一次then的参数
  return new Error;//返回的是普通值
}, err => {
  console.log('p1:err', err);
}).then((data)=> {
  console.log('d',data);
},err=>{
  console.log('e',err);
})
复制代码
  • then的返回值如果是promise，会取promise的返回结果作为外层下一次then的参数，如果返回的是普通值，直接把值作为外层下一次then的参数
  • 那我们接着往下写吧我们看到的是
let p = new Promise((resolve, reject) => {
    resolve('林俊杰');
});
p.then().then()
p.then();
复制代码
  • 上面例子的两个then方法是不一样的结果，所以then方法调用后，返回的是新的promise（也有可能不是promise），链式写法靠的是返回新的promise（而不是this），有可能是失败走向成功的，所以then里面要return新的promise2
  • 此时主要处理promise2(简称p2)，与其返回值X的关系，方法resolvePromise(promise2, x, resolve, reject);
2.3.1 p2的返回值x也是p2，如下:
let promise2 = p.then(()=>{
    return promise2;//Chaining cycle detected for promise，会报错循环引用。
})
复制代码
  • 上面例子中，p2会等着自己的返回结果，一直没有结果不会调成功也不会调用失败，会报循环引用错误
2.3.2 p2的返回值x有可能是普通值，如下:
let promise2 = p.then((data)=>{
    return '林俊杰';
},(err)=>{
    return 'z'
})
promise2.then((data) => { 
    console.log('d', data); //d 林俊杰
}, (err) => { 
    console.log('e', err) 
});
复制代码
  • 上面例子，p2的返回值如果是普通值（只要不抛出错误throw new Error()），不管执行的是成功函数（onFulfilled）还是失败函数（onRejected），都会走到下一个then的成功态里
2.3.3 p2的返回值x有可能是函数，那么认为它是promise，如下:
let p2 =p.then((data) => {
  return new Promise((resolve, reject)=>{
    resolve(new Promise((resolve, reject)=>{
      resolve(1111)
    }))
  })
 }, (err) => {}).then((data) => {
  console.log('d', data);//d 1111
}, err => {
  console.log('e', err);
})
复制代码
  • 上面例子，p2的返回值是多层promise嵌套，需要递归调用resolvePromise方法。
  • 接下来根据promise a+来写方法resolvePromise
function resolvePromise(promise2, x, resolve, reject) {
    //promise2返回新的promise，x为promise2的返回值，另外两个是参数
  // 判断返回值是不是promise2 本身
  if (promise2 === x) {//报错，见2.3.1
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  // x不是null或者是对象或者函数（当然null的话是返回null，同普通值）
  if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    let called; // 就是为了防止，调取了成功态，在去调用失败态，
               //或者调取了失败态，在去调取成功态，弄一个标识
    try { // 防止取then时出现异常 例如Object.defineProperty，修改了then方法
      let then = x.then; // 取x的then方法 {then:{}}
      if (typeof then === 'function') { // 如果then是函数我就认为它是promise
        // call：this指向x,后面分别是成功的回调和失败的回调
        then.call(x, y => { // 如果y是promise就继续递归解析promise
          if(called) return;
          called = true;
          resolvePromise(promise2,y,resolve,reject);
        }, r => { // 只要失败了就失败了
          if (called) return;
          called = true;
          reject(r);
        });
      }else{ // then是一个普通对象，就直接成功即可
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else { 
    resolve(x); // x就是一个普通值，例子见2.3.2
  }
}
复制代码

2.4 promise值的穿透

let p = new Promise((resolve, reject) => {
    resolve('林俊杰');
});
p.then().then().then((data)=>{
    console.log(data);//林俊杰
})
复制代码
  • 上面例子，前面两个then都没有传参数或者参数为null，但是仍然将数据传给了最后一个then的onFulfilled成功态或者onRejected失败态，所以在then方法中首先要判断一下参数
// 解决onFulFilled,onRejected没有传的问题
    onFulFilled = typeof onFulFilled === 'function' ? onFulFilled : y => y;
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
复制代码

对于原生的promise的then方法来说是属于异步的，会先执行同步代码以后再去执行then，例如：

p.then(()=>{console.log(1});
console.log(2);
复制代码
  • 上面例子中可以得到的是2比1要先输出，所以then是异步，所以每一个执行都加一个定时器包起来

2.5 promise的其他方法

2.5.1 catch

p.then().then().catch((err)=>{
console.log(err)
}).then((data)=>{
    console.log(data)
})
复制代码

其实catch是then的一个简写的方法，没有传成功的回调的时候走的是catch,但是catch走完了，还会继续往下走then，所以返回的依旧是promise。

catch(rejected){
    return this.then(null, rejected)
}
复制代码

2.5.2 resolve + reject

Promise.resolve = function(val) {
    return new Promise((resolve, reject)=> resolve(val))
}
Promise.reject = function(val){
    return new Promise((resolve, reject)=> reject(val))
}
复制代码

2.5.3 all

原生上的all方法,以数组的形式把两个promise

p.all([promise1,promise2]).then((arr)=>{
    consolr.log(arr)
})
复制代码
  • 其中arr是all里面promise执行完的内容，顺序依次，全成功才成功，一个失败就失败
Promise.all = function(promises) {
    return new Promise((resolve,reject)=> {
    let arr = [];
    let i = 0;
    function processData(index, data) {
        arr[index] = data;
        i++;
        if(i === promises.length) {
            resolve(arr);
        }
    }
        for(let i =0;i<promises.length;i++){
            promises[i].then(data=>{
               processData(i,data); 
            },reject);
        }
    })
}
复制代码

2.5.4 race

race方法是选择多个promise首先执行完成的哪一个promise的执行结果返回即可。一个成功即成功

Promise.race(promises) {
    return new Promise((resolve,reject)=>{
        for(let i = 0;i<promises.length;i++){
            promises[i].then(resolve,reject)
        }
    }) 
}
复制代码

2.6 bluebird

  • bluebird是让异步方法直接promise化，使用方式
npm install bluebird
复制代码
let read = bluebird.promisify(fs.readFile);
read('./a.txt', 'utf8').then(data=>{
    console.log(data);
})
复制代码
  • 使异步方法fs.readFilepromise化。相当于包了一层promise
function promisify(fn) {
    return function(...args){
        return new Promise((resolve, reject)=>{
            fn(...args,function (err,data) {
                if(err) reject(err);
                resolve(data);
            })
        })
    }
}
复制代码
let r = blusebird.promisifyAll(fs);
复制代码
  • 这个方法把fs上面的方法都增加了一个Async，并且promise化。

2.7 Q

  • 同样可以promise化
npm install q
复制代码
let Q = require('q');
let defer = Q.defer()
复制代码

  • 这里可以生成promise语法糖defer。

  • 下一篇来解await async。。。

weixin_34367257
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
30分钟，让你彻底明白Promise原理1
08-03
Promise是JavaScript中用于处理异步操作的重要工具，它遵循了Promise/A+规范，旨在解决回调地狱问题，提供更优雅的异步控制流程。...理解Promise的工作原理，对于编写高质量的异步JavaScript代码至关重要。
这 10 个片段，有助于你理解 ES 中的 Promise
高先生的猫
08-03 732
在开发中，了解JavaScript和 Promise 基础，有助于提高我们的编码技能，今天，我们一起来看看下面的 10 片段，相信看完这 10 个片段有助于我们对 Promise 的理解。 片段1： const prom = new Promise((res, rej) => { console.log('first'); res(); console.log('second'); }); prom.then(() => { console.log('third'); ..
Promise处理异常
csdn_girl的博客
08-08 3603
promise.catch()可以捕获promise所有状态的异常。包括： 1、resolve()和reject()对应的promise.then(()=>{},()=>{}) 中的俩回调函数中的异常 2、Promise.resolve(err)触发的 3、Promise.reject(err)触发的 所以在promise后一般都要加catch const initPromise = ...
第13集丨Promise循环使用
秋堂主的博客
07-12 562
在for循环中，先把for循环结束完，才会调用then中的回调函数。 采用递归调用的形式改写for循环， 在T函数中, 由于T2中有异步操作，无法保证，运行完T2之后，在执行打印console.log("我是后续操作...")语句，...
完整实现原生Promise
m0_46269977的博客
04-08 665
手写前需要了解这些 1.什么是宏任务 我们都知道JS是单线程的，但是一些高耗时操作就带来了进程阻塞的问题，为了解决这个问题，JS有两种任务的执行模式，同步模式和异步模式。 在异步模式下，创建异步任务主要分为宏任务和微任务两种，宏任务是由宿主（浏览器、Node）发起的，而微任务由JS自身发起。 宏任务与微任务的几种创建方式 ???? 宏任务（Macrotask）微任务（Microtask）setTimeoutrequestAnimationFrame（有争议）setIntervalMutationObserv
php promise,你实现一个完整的 Promise的方法
weixin_34638141的博客
03-17 678
用过 Promise，但是总是有点似懂非懂的感觉，也看过很多文章，还是搞不懂 Promise的 实现原理，后面自己边看文章，边调试代码，终于慢慢的有感觉了，下面就按自己的理解来实现一个 Promise。想要完全理解代码，需要理解 this 和闭包的含义。Promise是什么简单来说，Promise 主要就是为了解决异步回调的问题。用 Promise 来处理异步回调使得代码层次清晰，便于理解，且更加...
让你彻底掌握es6 Promise的八段代码
01-19
本文将通过八段代码让大家彻底的掌握Promise，下面话不多说，来一起看看详细的介绍： 1.Promise的立即执行性 var p = new Promise(function(resolve, reject){ console.log(create a promise); resolve(success)...
JavaScript Promise 原理
05-15
Promise 原理，包括then、catch、all、race、reject、finally、resolve方法。200行代码实现自己的Promise
循环调用Promise，解决方案
qq_46544185的博客
03-13 1571
循环调用Promise，解决方案
从头手写一个Promise
weixin_34062329的博客
05-13 129
前言 在javascript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。 最开始我们可以用回调函数来解决这个问题， function callBack(){ console.log('回调') } setTimeout(callBack, 1000) // 回调 复制代码但是随着业务的不断深入，难免会像陷入回调地狱这样...
使用Promise提升异步编程效率
最新发布
m0_68932924的博客
02-19 225
Promise是一种表示异步操作的对象，可以在未来的某个时间点返回异步操作的结果。它有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦Promise状态发生变化，就会调用相应的处理程序。Promise是一种强大的工具，可以使异步编程更加清晰和可维护。通过使用Promise，我们可以更容易地处理异步操作的成功和失败情况，以及管理它们的顺序和并行执行。希望这篇博客能帮助你更好地理解和使用Promise！
2021-05-27
weixin_44194685的博客
05-28 117
目录 es6若干方法总结 对象扩展方法 1.Object.assign() 该方法可以将多个源对象属性复制到一个目标对象中 const obj1 = { a: 123, b: 234 } const obj2 = { a: 456, c: 234 } const result = Object.assign(obj1, obj2) console.log(result) // { a:456, b:234, c:234 } console.log(r...
Promise 对象循环调用
望京十三兄的博客
03-31 2373
解答： 首先定义一个可重复调用 Promise 的方法 functionretry(){ varpromise; promise=newPromise(function(resolve,reject){ varelapse=Math.random()*2000; setTimeout(resolve,elapse); ...
new promise后执行的程序效率如何变得更高
weixin_43321726的博客
07-14 277
promise执行效率
es6 promise 源码解析
qq_42389674的博客
07-17 354
promise 源码解析
30分钟，让你彻底明白Promise原理
嘿嘿
05-16 421
前言 前一阵子记录了promise的一些常规用法，这篇文章再深入一个层次，来分析分析promise的这种规则机制是如何实现的。ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不是太了解，可以移步我的上一篇博文。 本文的promise源码是按照Promise/A+规范来编写的（不想看英文版的移步Promise/A+规范中文翻译） 引子 为了让大家更容易理解，我们从一个场景开始讲解，让大家一步一步跟着思路思考，相信你一定会更容易看懂。 考虑下面一种获取用户id的请求处理 /
Promise构造函数的方法1:Promise.resolve()和Promsie.reject()
visibleforest的博客
08-06 3105
1.promise.resolve() 它是成功状态的Promsie的一种简写方式。 参数传递：（以下重点掌握一般参数的传递）： 1）一般参数和参数为空的情况下，直接返回一个resolved状态的Promise对象； 2）如果参数是Promise的实例，将不做任何修改、原封不动地返回这个实例； 3）如果参数是具有then方法的对象，Promise.resolve()会将这个对象转为Promise对象，并立即执行这个对象的then方法。 ps: 重视返回的Promise的状态对其后者执行的函数的影
使用promise解决回调地狱_promise 的那些事
weixin_32463071的博客
12-29 700
1. promise 的由来1.1 异步我们都知道 js 是单线程的，也就是说一次只能完成一件任务。如果有多个任务，就必须排队，等待前面一个任务完成，再执行后面一个任务。这种方式虽然实现起来比较简单，执行环境相对单纯，但是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段 js 代码长时间运行（比如死循环），导致整个页面卡在这个地...
Promise实现原理，给一份实现代码
05-26
这个实现代码中，我们首先定义了一个 Promise 类，其构造函数接受一个 executor 函数，如果在 executor 函数中调用了 resolve 方法，则 Promise 的状态会变为 fulfilled，如果调用了 reject 方法，则 Promise 的状态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值