深入理解Promise

最新推荐文章于 2024-04-04 15:20:36 发布
最新推荐文章于 2024-04-04 15:20:36 发布
阅读量317 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44955769/article/details/112390150
版权

ES6提供的Promise对象是异步控制相较于回调的更好的一种方法。包括ES8提供的asyncFunction本质上也是基于Promise和生成器的结合，因此在已经了解Promise对象的常用API基础上，更加深入的去了解如何使用Promise去解决一些常见的难题对于开发将会有一些帮助。

文章阅读前，希望读者已经对Promise的使用及相关api有了一定的了解 。[ 快速学习Promise ]

一、如何对Promise异步任务进行超时监听

任务描述

作为一道开胃小菜，这个问题还是不难解决的。平时对于一些异步任务很有可能需要进行超时监听，那么如何利用Promise来进行超时监听/监控呢？

解决方案

// 封装一个严格任务函数，第一个参数为promise对象，第二个参数为判定的超时标准，默认3s
function strictTack(promise,delay = 3){
  // 函数返回一个超时基准promise对象
  let promiseTimeout = function(delay){
    return new Promise((res,rej)=>{
      setTimeout(()=>{
        rej(new Error("运行超时！"))
      },1000 * delay)
    })
  }
  // race，参数数组内的promise并发执行，一旦其中有一个promise对象产生判决就会终止其余的promise对象
  return Promise.race([promise,promiseTimeout(delay)])
}
// 异步任务p1
let p1 = new Promise((res,rej)=>{
  setTimeout(()=>{
    res("p1 was resoved")
  },1000 * 2)
})

// 异步任务p2
let p2 = new Promise((res,rej)=>{
  setTimeout(()=>{
    res("p2 was resoved")
  },1000 * 4)
})

strictTack(p1)
.then(e=>{
  console.log(e)// p1 was resoved
}).catch(err=>{
  console.log(err)
}) 

strictTack(p2)
.then(e=>{
  console.log(e)
}).catch(err=>{
  console.log(err) // Error:运行超时！
})

任务总结

对于这个问题来说，核心部分就是利用好Promise.race这个API，因为使用它所执行的的Promise对象中的异步任务都是“竞态”的，只接受第一个发生判决的Promise对象。那么此时采用超时基准promise对象配合race正好巧妙的解决了超时监听的问题。

二、如何自己实现一个Promise

任务描述

这种具有一定难bian度tai的题目一般会在面试中遇到，那么如何手动实现一个Promise（或部分功能）？

解决方案

1.V 0.1初步版本的Promise (不支持正规Promise的链式调用)

class PromisePolyfill{
  constructor(exector = ()=>{}){
    this.status = 'pending' // promise当前状态
    this.reason = undefined // 用户回显到reject函数的值
    this.value = undefined // 用户回显到resolve函数的值
    // 成功事件回调队列
    this.onFulfilledCallBacks = []
    // 失败事件回调队列
    this.onRejectedCallBacks = []
    
    //实现resolve函数
    let resolve = (value)=>{
      if(this.status === 'pending'){
        this.value = value
        this.status = 'fulfilled'
        this.onFulfilledCallBacks.map(e=>e())
      }
    }

    // 实现reject函数
    let reject = (reason)=>{
      if(this.status === 'pending'){
        this.reason = reason
        this.status = 'rejected'
        this.onRejectedCallBacks.map(e=>e())
      }
    }

    try{
      // 运行执行器
      exector(resolve,reject)
    }catch(err){
      reject(err)
    }
  }

  then(onFulfilled,onRejected){
    // 同步情况
    if(this.status === 'fulfilled' && onFulfilled){
      onFulfilled(this.value)
    }
    if(this.status === 'rejected' && onRejected){
      onRejected(this.reason)
    }
    // 异步情况
    if(this.status === 'pending'){
      // 将任务成功回调加入到成功队列中
      onFulfilled && this.onFulfilledCallBacks.push(()=>{
        onFulfilled(this.value)
      })
       // 将任务失败回调加入到失败队列中
      onRejected && this.onRejectedCallBacks.push(()=>{
        onRejected(this.reason)
      })
    }
    return this
  }
    
  catch(onRejected){
        // 将任务失败回调加入到失败队列中
    onRejected && this.onRejectedCallBacks.push(()=>{
      onRejected(this.reason)
    })
    return this
  }
}

2.V 0.2支持链式调用，但是未实现Promise的相关API – all、race、reject、resolve

class PromisePolyfill{
  constructor(exector = ()=>{}){
    this.status = 'pending' // promise当前状态
    this.reason = undefined // 用户回显到reject函数的值
    this.value = undefined // 用户回显到resolve函数的值
    // 成功事件回调队列
    this.onFulfilledCallBacks = []
    // 失败事件回调队列
    this.onRejectedCallBacks = []
    
    //实现resolve函数
    let resolve = (value)=>{
      if(this.status === 'pending'){
        this.value = value
        this.status = 'fulfilled'
        this.onFulfilledCallBacks.map(e=>e())
      }
    }

    // 实现reject函数
    let reject = (reason)=>{
      if(this.status === 'pending'){
        this.reason = reason
        this.status = 'rejected'
        this.onRejectedCallBacks.map(e=>e())
      }
    }

    try{
      // 运行执行器
      exector(resolve,reject)
    }catch(err){
      reject(err)
    }
  }

  then(onFulfilled,onRejected){

    let promise2 = new PromisePolyfill((resolve, reject)=>{
      if(this.status === 'fulfilled' && onFulfilled){
        let x = onFulfilled(this.value)
        // resolvePromise函数，处理自己return的promise和默认的promise2的关系
        resolvePromise(promise2, x, resolve, reject)
      }
      if(this.status === 'rejected' && onRejected){
        let x = onRejected(this.reason)
        resolvePromise(promise2, x, resolve, reject)
      }
      // 异步情况
      if(this.status === 'pending'){
        // 将任务成功回调加入到成功队列中
        onFulfilled && this.onFulfilledCallBacks.push(()=>{
          let x = onFulfilled(this.value)
          // resolvePromise函数，处理自己return的promise和默认的promise2的关系
          resolvePromise(promise2, x, resolve, reject)
        })
         // 将任务失败回调加入到失败队列中
        onRejected && this.onRejectedCallBacks.push(()=>{
          let x = onRejected(this.reason)
          resolvePromise(promise2, x, resolve, reject)
        })
      }
    })
    return promise2
  }
}
function resolvePromise(promise2, x, resolve, reject){
  // 循环引用报错
  if(x === promise2){
    // reject报错
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  // 防止多次调用
  let called;
  // x不是null 且x是对象或者函数
  if (x != null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      // A+规定，声明then = x的then方法
      let then = x.then;
      // 如果then是函数，就默认是promise了
      if (typeof then === 'function') { 
        // 就让then执行 第一个参数是this   后面是成功的回调 和 失败的回调
        then.call(x, y => {
          // 成功和失败只能调用一个
          if (called) return;
          called = true;
          // resolve的结果依旧是promise 那就继续解析
          resolvePromise(promise2, y, resolve, reject);
        }, err => {
          // 成功和失败只能调用一个
          if (called) return;
          called = true;
          reject(err);// 失败了就失败了
        })
      } else {
        resolve(x); // 直接成功即可
      }
    } catch (e) {
      // 也属于失败
      if (called) return;
      called = true;
      // 取then出错了那就不要在继续执行了
      reject(e); 
    }
  } else {
    resolve(x);
  }
}

3.在v0.2基础上封装相关API

  • all(iterable) 这个方法接受一个promise数组，返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。
PromisePolyfill.all = function (promises){
  function processData (){
    let Arr = []
    let i = 0
    return function (index,data,resolve){
      Arr[index] = data
      i++
      if(i === promises.length){
        resolve(Arr)
      }
    }
  }
  let process = processData()
  return new PromisePolyfill((resolve,reject)=>{
    promises.map((promise,index) => {
      promise.then(data=>{
        process(index,data,resolve)
      },reject)
    })
  })
}
  • race(iterable) 这个方法接受一个promise数组。当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。
PromisePolyfill.race = function(promises){
  return new PromisePolyfill((resolve,reject)=>{
    promises.map(promise=>{
      promise.then(resolve,reject)
    })
  })
}
  • resolve(value) 返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。
PromisePolyfill.resolve = function(data){
  return new PromisePolyfill((resolve,reject)=>{
    resolve(data)
  })
}
  • reject(value) 返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法
PromisePolyfill.reject = function(data){
  return new PromisePolyfill((resolve,reject)=>{
     reject(data)
  })
}

三、手写一个Promise的Ajax函数

任务描述

老生常谈的问题了，面试官喜欢问的问题。主要思想实现出来就好了

解决方案

function ajax (params){
    return new Promise((resolve,reject)=>{
        let request = new XMLHttpRequset()
        //设置请求方式和请求地址
        request.open(params.type || 'get',params.url)
        
        request.onreadystatechange = ()=>{
            //当请求返回响应时
            if(request.readyState === 4){
                // 默认情况下返回200意味着请求成功
                if(request.status === 200){
                    resolve(JSON.parse(request.responseText))
                }else{
                    reject(JSON.parse(request.responseText))
                }
            }
        }
        //携带请求头发送请求
        request.send(params.data || null)
    })
}

四、理论部分

关于then和catch的返回值

如果自己去实现了一次Promise对象之后会发现，then和catch如果没有返回一个标准的promise对象时，将会默认返回一个Promise.resolve(基本值)，即使你没有写任何return语句。

let p1 = new Promise((res,rej)=>{
  setTimeout(()=>{
    // rej("p1 was rejected")
    res("p1 was resoved")
  },1000 * 2)
})

p1.then(res=>{
  console.log("Then1:"+res)
}).then(res=>{
  console.log("Then2:"+res)
  return 'Hello'
}).catch(err=>{
  console.log("Error1:"+err)
  return Promise.reject("Error For Catch 1")
}).then(res=>{
  console.log("Then3:"+res)
  return Promise.reject('ERROR For Then 3')
}).then(res=>{
  console.log("Then4:"+res)
}).catch(err=>{
  console.log("Error2:"+err)
}).then(res=>{
  console.log("Then5:"+res)
})

/*
结果
Then1:p1 was rejected
Then2:undefined
Then3:Hello
Error2:ERROR For Then 3
Then5:undefined
*/

经过分析不难发现，对于一个Promise中的链式调用的顺序是这样的：

  1. 对于一个then/catch，默认返回为一个resolve
  2. 当返回一个reject时，将调用当前节点往后的最近的catch节点中的回调（跳过中间的then）
  3. 如果当前节点并没有返回reject但是恰巧后面的节点就是是catch，那么将会跳过这个（或连续几个）catch，直接到后面最近的then节点以上为现象，原理请参考第二节Promise的实现

关于async Function (async/await)

asyncFunction是ES8中提出的更好的异步解决方案，实际用起来也确实如此。那么asyncFunction与Promise之间存在什么样的关系呢？

[ 快速学习async Function ]

async function fetch(){
  console.log("Fetch is RUNING") // 立即输出Fetch is RUNING
  let  data1 = await new Promise((res,rej)=>{
    setTimeout(()=>{
      res(1)
    },1000 * 2)
  })
  console.log(data1) //时间线至少2s后打印1
  let  data2 = await new Promise((res,rej)=>{
    setTimeout(()=>{
      res(2)
    },1000 * 5)
  })
  console.log(data2) // 时间线至少2+5=7s后打印2
  console.log(data1+data2) // 紧接着上一句执行，打印 3
}
fetch()

上例中展示了async/await的基本用法和执行过程

  1. 第一句同步打印任务可以直接输出。
  2. 第二句遇到await ,将会等待当前await任务返回Promise.resolve后才会继续执行下一句。这种模式和生成器的模式非常相像，async/await优于生成器的地方就是，生成器需要手动next才能进行下一步，而async/await是自动next ,显然实现上要更为复杂。
  3. 依次类推…

从这个例子中可以看出，多个await产生的异步任务是逐个执行的，而不是并发。所以想要实现多异步任务并发控制，仍然需要使用Promise.all或者Promise.race。

接下来，再来看个例子

async function fetch(){
  let  data1 = await new Promise((res,rej)=>{
    setTimeout(()=>{
      res(1)
    },1000 * 2)
  })
  let  data2 = await new Promise((res,rej)=>{
    setTimeout(()=>{
      res(2)
    },1000 * 5)
  })
  return data1 + data2
}

fetch().then(res=>{
  console.log(res) // 至少7s后输出 3
})

你没看错，asyncFunction将会默认返回一个Promise对象，和Promise.prototype.then返回Promise的效果一致

到这儿不难看出Promise的重要性了吧，现在的主要异步任务控制方式实际上都没有离开Promise。

文i
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入理解Promise.all
12-09
【深入理解Promise.all】 Promise.all 是 JavaScript 中处理异步操作的一种关键方法，它接收一个 Promise 对象的数组作为参数，并在所有 Promise 对象都解决（resolve）后返回一个新的 Promise 实例。这个返回的 ...
Promise的深入理解
weixin_45318508的博客
09-15 181
promise的理解以及含义
Promise深入理解
zgh472365411的博客
09-16 487
Promise深入理解
深入理解js promise chain
10-22
下面小编就为大家带来一篇深入理解js promise chain。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深入理解ES6 Promise 扩展always方法
08-29
深入理解ES6 Promise 扩展always方法 ES6 Promise 扩展always方法是ES6 Promise的一个重要扩展，允许开发者在Promise对象中执行一些通用的操作，无论Promise对象最终是成功还是失败。本文将详细介绍ES6 Promise ...
Promise学习笔记
晴宇
04-03 1320
#目录 [TOC] 一、Promise的理解与使用 1、概念: ​ Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 通俗讲，Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。 Pending 正在做。。。 Resolved 完成这个承诺 Rejected 这个承诺没有完成，失败了 ​ Promi
Promise详解
weixin_49759035的博客
03-07 9745
前言： 日常开发中，异步操作几乎每天都能见到。传统的意不解决方案是通过回调函数，随着程序逻辑越来越复杂，回调函数的方式变得越来越繁琐，很容易出现回调地狱，于是一种更合理更强大的代替方案出现–Promise，接下来就深入学习Promise是如何解决异步操作的。 一.基础 定义： Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值. const promise1 = new Promise((resolve, reject) => { setTimeout(() =&gt
Promise
Wen_Tao98的博客
11-25 479
Promise 什么是promise 解决地狱回调 可以链式调用 有三种状态。 promise有哪些API. 应用场景：封装ajax,axios的get,post封装，微信小程序中封装wx.request()，uniapp开发中uni.request() 名词约定 promise（首字母小写）对象指的是“Promise实例对象” Promise首字母大写且单数形式，表示“Promise构造函数” Promises首字母大写且复数形式，用于指代“Promises规范” 什么是Promise？ Promise，
深入理解Promise之一步步教你手写Promise构造函数
zxdznyy的博客
01-27 2009
Promise是前端面试中笔记走重要的一个考点。如何真正的了解promise？我们不如自己动手，写一个可以拿来用的Promise.js。下面是循序递进的写法教学，本文的最后也有完整写法的代码可以借鉴，希望能够帮助大家！后面如果有机会会写一篇详解promise的博客，欢迎关注！
promise详解
热门推荐
A20201130的博客
03-23 1万+
一、promise含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 二、异步和回调 异步处理的模型：ES
谈谈对于Promise简单的理解
weixin_60146725的博客
01-07 1757
在这里简单的说一下我对promise浅显的理解： promise是ES6提出的 称之为 “回调地狱的超级英雄” 什么是回调地狱呢？ 这就是一个很典型的回调地狱 这样的代码 逻辑性比较强 而且易读性不高 牵一发而动全身 如果有一次执行错误下面的回调就不会再继续执行..... 举例子说明一下： 在平常工作时调接口数据 (当然这只是我举的一些例子 仅此而已 各位后端大佬们才不会写这么折磨人的接口的........) 我们在调接口拿数据时下一个接口的调用需要依赖上一次接口返回的信息 就好比...
promise原理和使用方法
qq_59315646的博客
04-13 2462
从本意上讲，它是承诺，承诺它过一段时间会给你一个结果，其实是一个构造函数，自己身上有all、reject、resolve，race这几个方法，原型上有then、catch，finally等方法。1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
promise简单理解
杨振洲的博客
11-16 1239
1、什么是promise 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件的结果。 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise 提供统一的API ，各种异步操作都可以用同样的方法进行处理，让开发者不用关注于时序和底层的结果。 Promise 的状态具有不受外界影响和不可逆两个特点。 2.Promise是如何解决异步操作 1）调用回调过早 对于Promise 来说，即使是立即完成的 Promise 也无法被同步观察到， 也就是说一个Promi
对Promise的理解以及Promise的基本用法
小草莓的博客
07-18 5059
一、理解Promise ① 定义 ② 优点 ③ 特点 ④ 缺点 二、Promise基本用法 ① resolve函数的作用 ② reject函数的作用 ③ then方法 ④一个异步加载图片的例子 三、Promise的其他常见方法 ①Promise.prototype.then() ②Promise.prototype.catch() ③Promise.prototype.finally() ④Promise.all() ⑤Promise.race() 四、
Promise【一篇搞懂】
最新发布
weixin_50539249的博客
04-04 2056
MDN 上的定义：一个Promise对象代表一个在这个Promise被创建出来时不一定已知的值。它让您能够 把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。抽象表达：Promise 是 ES6 引入的异步编程的新解决方案。在 Promise 出现之前，只是单纯的使用回调函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值