Promise的基本使用

摸鱼小号

于 2023-11-10 10:10:05 发布

阅读量190

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_59970020/article/details/134326547

版权

1. Promise 介绍与基本使用

1.1 Promise 是什么

抽向表达
- Promise 是一门新的技术[ES6规范]
- Promise 是JS中进行异步编程的新解决方案，
- 备注：旧方案是单纯使用回调函数
具体表达：
- 从语法上来说：Promise 是一个构造函数
- 从功能上来说:Promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值

1.2 为什么要使用Promise

指定回调函数的方式更加灵活
- 旧的：必须启动异步任务前指定
- promise:启动异步任务=》返回promise对象=》给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）
支持链式调用，可以解决回调地狱的问题
- 什么时回调地狱？
- 回调函数嵌套调用，外部回调函数异步执行的结果时嵌套的回调执行的条件
- 回调地狱的缺点
- 不便于阅读
- 不便于异常处理
解决方案？
- prommise 链式调用、
终极解决方案
- 1.3 Promise 的状态改变实例对象的的一个属性【PromiseState】
Promise 有三种状态
- 默认 pending 未决定的
- pending 变成resolved /fulfilled 成功
- pending 变为 rejected 失败
说明只有这个3种，且一个promise 对象只能改变一次，无论成功还是失败，都会有一个结果数据，成功的结果一般称为value,失败的结果一般称为reason

1.4 Promise 对象的值实例对象的一个属性【PromiseResult】

这个属性保存的是对象【成功/失败】的结果
这个两个函数resolve,reject 是可以对Promise对象值进行修改

2. Promise API

2.1 如果使用Promise

2.1.1 API

Promise构造函数：Promise(excutor){}
- excutor函数：执行器(resolve,reject)=>{}
- resolve 函数：内部定义成功时我们调用的函数 value=>{}
- reject 函数：内部定义失败时外卖调用的函数 reason=>{}
  说明：excutor会在Promise 内部立即同步调用，异步操作在执行器中执行
Promise.prototype.then方法：(onResolved,onRejected)=>{}
- onResolved函数：成功的回调函数(value)=>{}
- onRejected函数：失败的回调函数(reason)=>{}
说明：指定用于得到成功的回调函数和用于得到reason的失败回调返回一个新的promise对象
Promise.prototype.catch方法：(onRejected)=>{}
- onRejected函数：失败的回调函数(reason)=>{}
Promise.resolve方法:(value)=>{}
- 这个方法属于函数对象的
- value:成功的数据或promise对象
- 说明：快速得到一个Primise 对象。返回一个成功/失败的promise 对象

//如果传入的参数为 非Promise类型的对象。则返回的结果为成功promise对象
let p = Promise.resolve(521);
console.log(p);//得到一个成功的promise 对象
//如果传入的参数为Promise 对象，则参数的结果决定了resolve结果
let p2 = Promise.resolve( new Promise((resolve.reject)=>{
  // resolve('ok');
  reject('err');
}))
console.log(p2);//得到一个成功的promise 对象

Promise.reject方法：(reason)=>{}
- 这个方法属于函数对象的
- reason 失败的原因
- 说明:返回一个失败的promise对象

//无论你传入的参数是什么。则返回的结果为失败promise对象
let p = Promise.reject(521);
console.log(p);//得到一个失败的promise 对象

Promise.all方法：(promises)=>{}
- 这个方法属于函数对象的
- promises:包含多个promise 的数组
- 说明：返回一个新的promise,只有所有的promise 都成功才成功，只要有一个失败就直接失败

// 1.全部成功
let p1 =  new Primise((resolve,reject)=>{ resolve('ok') });
let p2 =  new Primise((resolve,reject)=>{ resolve('Success') });
let p3 =  new Primise((resolve,reject)=>{ resolve('Oh Yeah') });

//
const result = Promise.all([p1,p2,p3]);
console.log(result);//得到一个成功的promise 对象 值为返回值得数组

// 2.有一个失败成功
let p1 =  new Primise((resolve,reject)=>{ resolve('ok') });
let p2 =  new Primise((resolve,reject)=>{ rfeject('Success') });
let p3 =  new Primise((resolve,reject)=>{ resolve('Oh Yeah') });

//
const result = Promise.all([p1,p2,p3]);
console.log(result);//得到一个失败的promise 对象 值为失败返回的值

Promise.race 方法：(promises)=>{}
- promises:包含n个promise的数组
- 说明：返回一个新的promise 第一个完成的promise的结果状态就是最终的结果状态，值也是

let p1 =  new Primise((resolve,reject)=>{ resolve('ok') });
let p2 =  new Primise((resolve,reject)=>{ resolve('Success') });
let p3 =  new Primise((resolve,reject)=>{ resolve('Oh Yeah') });

//
const result = Promise.race([p1,p2,p3]);
console.log(result);//得到一个的promise 对象 值为第一返回的值，状态也为第一个改变状态的promise的状态

3. Promise 关键问题

3.1 Promise 的几个关键问题

3.1.1 如何改变promise的状态

resolve(value):如果当前是pending 就会变为 resolved
reject(reason):如果当前是pending 就会变为rejected
抛出异常：如果当前是pending旧会变为rejected

let p =  new Primise((resolve,reject)=>{
  //1. resolve 函数
  //  resolve('ok');// pending状态 =》 fulfilled 状态
  // 2. reject 函数
  // reject('error');// pending状态 =》 rejected 状态
  //3. 抛出错误 
  throw '出问题了'; // pending状态 =》 rejected 状态
});
console.log(p);//得到一个的promise 对象 值为第一返回的值，状态也为第一个改变状态的promise的状态

3.1.2 一个promise 指定多个成功then()/失败catch()回调函数，都会调用吗？

当promise改变为对应状态时都会调用

let p =  new Primise((resolve,reject)=>{
  resolve('ok');// pending状态 =》 fulfilled 状态
});
// 指定回调一
p.then(vaule=>{
  console.log(value);// 执行了
})
// 指定回调二
p.then(vaule=>{
  console.log(value);// 也会执行
})

3.1.3 当变promise状态和指定回调函数谁先谁后？

都有可能，正常情况下时先指定回调函数再改变状态，但也可以先改变状态在指定回调
如何先改变状态在指定回调函数？
- 在执行器中直接调resolve()/reject()
- 延迟时间再调用then()
什么谁后才能得到数据
- 如果先指定的回调,那当状态发送改变时，回调函数就会调用，得到数据
- 如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据

  let p =  new Primise((resolve,reject)=>{
    setTimeout(()=>{
      resolve('ok');
    },1000)

  });
  // 指定回调
  p.then(vaule=>{
    console.log(value);
  })

3.1.4 Primise.then() 返回的新Promise 的结果状态由什么决定？

简单表述：由then()指定的回调函数执行的结果决定
详细表达：
- 如果抛出异常，新Promise 状态变为resjected.reason为异常
- 如果返回的是非Promise 的任意值,新promise状态变为resolve，vaule为返回值
- 如果返回的是另一个新Promise。此Promise 的结果就会成为新的Promise的结果

  let p =  new Primise((resolve,reject)=>{
    setTimeout(()=>{
      resolve('ok');
    },1000)

  });
  // 执行rthen 方法
  let result = p.then(vaule=>{
    console.log(value);
    //1.怕抛出错误
    // throw '错误了!'
    //2.返回结果 是非Promise 类型的对象
    // return 521;
    // 3.返回的结果是 Promise 对象
    return new Promise((resolve,rejcet)=>{
      // resolve('ok');
      rejcet('error')
    })
  },(reason)=>{
    console.warn(reason)
  })

  //打印result 这个结果
  console.log(result)// then方法 返回的的结果是一个Promise 对象

3.1.5 Promise 如何串连多个操纵任务

promise 的then 返回一个新的 promise ，可以写成then()的链式调用
通过then的链式调用串连多个同步/异步任务

let p =  new Primise((resolve,reject)=>{
  setTimeout(()=>{
    resolve('ok');
  })
});

p.then(vaule=>{
  return new Promise((resolve,reject)=>{
      resolve('Success');
  });
}).then(value=>{
  console.log(value)
})

3.1.6 异常穿透

当使用Promise 的then链式调用时，可以在最后指定失败回调，
前面任何操作处理异常，都会传到最后失败的回调处理

let p =  new Primise((resolve,reject)=>{
  setTimeout(()=>{
    // resolve('ok');
    // rejcet('error')
  })
});

p.then(vaule=>{
 console.log('111')
 throw '失败啦';
}).then(value=>{
 console.log('222')
}).then(value=>{
 console.log('333')
}).catch(reason=>{
 console.warn(reason)
})

3.1.7 中断Promise 链？

当使用Promise 的then() 链式调用时，在中间中断，不在调用后面的回调函数
办法：在回调函数中返回一个pending 状态的promise 对象

let p =  new Primise((resolve,reject)=>{
  setTimeout(()=>{
    resolve('ok');
  })
});

p.then(vaule=>{
 console.log('111')
 // 中断链式操作 有且只有一个方式 返回一个pending 状态的Promise 对象
 return new Promise(()=>{})
}).then(value=>{
 console.log('222')
}).then(value=>{
 console.log('333')
}).catch(reason=>{
 console.warn(reason)
})