当前位置: 代码迷 >> 综合 >> 浅谈 Promise
  详细解决方案

浅谈 Promise

热度:43   发布时间:2023-12-12 19:41:17.0

promise是什么?

1、主要用于异步计算
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
3、可以在对象之间传递和操作promise,帮助我们处理队列

简单的说:解决回调地狱问题。

promise

  • promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以(闭包除外)
  • 并未剥夺函数return的能力,因此无需层层传递callback,进行回调获取数据
  • 代码风格,容易理解,便于维护
  • 多个异步等待合并便于解决

promise详解

  let a = 1new Promise((resolve, resject) => {setTimeout(() => {if (a == 1) {resolve('成功111')} else {resject("失败111")}})}).then((res) => {console.log(res)return new Promise((resolve, resject) => {setTimeout(() => {if (a == 1) {resolve('成功222')} else {resject("失败12132123")}})})}).then((res) => {console.log(res)})
  • resolve作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
    reject作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
  • promise有三个状态:
    1、pending[待定]初始状态
    2、fulfilled[实现]操作成功
    3、rejected[被否决]操作失败
    当promise状态发生改变,就会触发then()里的响应函数处理后续步骤;
    promise状态一经改变,不会再变。
  • Promise对象的状态改变,只有两种可能:
    从pending变为fulfilled
    从pending变为rejected。
    这两种情况只要发生,状态就凝固了,不会再变了。

Promise.all() 批量执行

Promise.all([p1, p2, p3])用于将多个promise实例,包装成一个新的Promise实例,返回的实例就是普通的promise
它接收一个数组作为参数
数组里可以是Promise对象,也可以是别的值,只有Promise会等待状态改变
当所有的子Promise都完成,该Promise完成,返回值是全部值得数组
有任何一个失败,该Promise失败,返回值是第一个失败的子Promise结果

//切菜function cutUp(){console.log('开始切菜。');var p = new Promise(function(resolve, reject){        //做一些异步操作setTimeout(function(){console.log('切菜完毕!');resolve('切好的菜');}, 1000);});return p;}//烧水function boil(){console.log('开始烧水。');var p = new Promise(function(resolve, reject){        //做一些异步操作setTimeout(function(){console.log('烧水完毕!');resolve('烧好的水');}, 1000);});return p;}Promise.all([cutUp(), boil()]).then((result) => {console.log('准备工作完毕');console.log(result);})

 Promise.race() 类似于Promise.all() ,区别在于它有任意一个完成就算完成

let p1 = new Promise(resolve => {setTimeout(() => {resolve('I\`m p1 ')}, 1000)});let p2 = new Promise(resolve => {setTimeout(() => {resolve('I\`m p2 ')}, 2000)});Promise.race([p1, p2]).then(value => {console.log(value)})

 

  • 常见用法:
    异步操作和定时器放在一起,,如果定时器先触发,就认为超时,告知用户;
    例如我们要从远程的服务家在资源如果5000ms还没有加载过来我们就告知用户加载失败

  • 现实中的用法
    回调包装成Promise,他有两个显而易见的好处:
    1、可读性好
    2、返回 的结果可以加入任何Promise队列