Promise

//异步请求的处理方式
/*
 * @Description: 这种回调的方式有很多弊端:
    1 如果我们自己封装的requestData, 那么我们在封装时候必须要自己设计好callback名称,并且使用好
    2 如果我们使用的是别人封装的requestData或者一些第三方库,那么我们必须去看别人的源码或者文档,
    才知道这个函数需要怎么获取结果
 * @Author: baozi
 * @Date: 2022-12-11 17:28:16
*/
const requestData = (url,successCallback,failtureCallback) =>{
  // 模拟网络请求,异步return不出去结果
  setTimeout(() =>{
    // 拿到请求结果
    // url传入某个值,请求成功
    if(url === 'baozi') {
      // 成功
      let names = ['abc','cba','dba']
      successCallback(names)
    }else {
      //否则请求失败
      let errMessage = "请求失败"
      failtureCallback(errMessage)
    }
  }
  ,3000)
}
requestData('baozi',(res) => {
  console.log(res);
},
(err) => {
  console.log(err)
})

// 更好的方案 Promise承诺(规范好了所有的代码编写逻辑)
const requestData2 = (url) => {
  return '承诺'
}

const chengnou = requestData2()


/*
 * @Description: Promis API
 * @Author: baozi
 * @Date: 2022-12-11 17:38:57
*/
// Promis 是一个类,当我们需要给予调用者一个承诺:
// 我会给你回调数据时,就可以创建一个Promise对象 new Promise
// 在通过new创建Promise对象时,我们需要传入一个回调函数, executor
// 当我们调用resolve回调函数时,会执行Promise对象的then方法传入的回调函数
// 当我们调用reject回调函数时,会执行Promise对象的catch方法传入的回调函数
// promise传入的回调函数会立即执行 , 这个函数称为 executor
// resolve 成功时 回调resolve
// reject 失败时 回调reject
const promise = new Promise((resolve,reject)=>{
  console.log('Promise传入的函数执行');
  resolve()
})
promise.then(()=>{
  console.log('then方法执行拉');
})
promise.catch(()=>{
  console.log('catch方法执行拉');
})
// then 方法传入的回调函数,会在Promise执行resolve函数时,被回调

// catch 方法传入的回调函数,会在Promise执行reject函数时,被回调

// 类比
class Person {
  constructor(callback){
    let foo = () => {

    }
    let bar = () => {

    }
    callback(foo,bar)
  }
}
const p =new Person((foo,bar)=>{
  foo()
  bar()
});


// 异步请求的promise
function requestData3(url) {
  // 异步请求的代码会被放入到executor中
 return new Promise((resolve, reject)=>{
  setTimeout(()=>{
    if(url === 'baozi'){
      let names = ['abc', 'def']
      resolve(names)
    }else {
      let errMessage = '请求失败,url错误'
      reject(errMessage)
    }
  },2000)
 }) 
}

const promiseRes = requestData3()
// promiseRes.then(()=>{
//   console.log('请求成功')
// }).catch(()=>{
//   console.log('请求失败掉毛');
// })

// node环境不能单独使用 promiseRes.catch(()=>{})

// 写法二,then传入两个回调函数
promiseRes.then((res)=>{
  console.log('请求成功',res)
},(err)=>{
  console.log('请求失败',err);
})

// promise resolve详解
// Promise 划分状态
// 1. exectutor  pending
// 2. 执行了resolve 状态:fulfilled、resolved(已敲定)
// 3. 执行reject 状态 rejected(已拒绝)
// 一旦确定 Promise状态不可更改
new Promise((resolve, reject) =>{
  // pending
  console.log('-----');
  resolve() //处于fulfilled状态
  // reject() 处于rejected状态
}).then(res=>{

},err =>{

})

/*
 * @Description: Promise的resolve参数
    1、 普通的值或者对象
    2、 传入一个Promise  那么当前的Promise状态会由传入的Promise来决定
    相当于状态进行了移交
    3、 如果传入一个对象,并且这个对象有实现then方法,
    那么也会执行该then方法(并且对象实现thenable),并且由该then方法决定后续状态
 * @Author: baozi 
 * @Date: 2022-12-11 19:23:15
*/

/*
 * @Description: then方法-接受两个参数
   then方法是Promise对象上的一个方法:它其实是放在Promise的
   原型上的Promise.prototype.then
 * @Author: baozi
 * @Date: 2022-12-11 20:13:23
*/
function Person2(){

}
// 加对象方法是添加在原型上
Person.prototype.eating = function(){}

// promise有哪些对象方法 直接打印对象看不见 enumerable为false的原因
console.log(Object.getOwnPropertyDescriptors(Promise.prototype));

// 同一个Promise可以被多次调用then方法
// 当我们的resolve方法被回调时,所有的then方法传入的回调函数都会被调用
// promise.then(res => {
//   console.log('res1',res);
// })
// promise.then(res => {
//   console.log('res2',res);
// })
// promise.then(res => {
//   console.log('res3',res);
// })

// 2.then 方法传入的 回调函数 可以有返回值 返回值是Promise
//  如果返回的是一个普通的值,那么这个普通的值会被作为一个新的Promise的resolve的值
//  此时的链式调用是新的’aaaa'的Promise的then方法
promise.then(res => {
  return 'aaaa'
}).then()

// 一个函数没有返回值 相当于返回 undefined

// 如果返回的是一个Promise , 相当于上面状态转移   
promise.then(res => {
  return new Promise((resolve,reject)=>{

  })
})

// catch方法
 // 1.当executor抛出异常时,也是会调用错误捕获的回调函数
 // 2.通过catch方法来传入错误(拒绝)的回调函数
 // Promise A+ 规范
 promise.then(undefined,err => {
  console.log(err);
 })

 promise.catch(res => {
  console.log(res);  
 })

 promise.then(res => {
  //新的Promise ,这种方式捕获的是上一个promise的异常
  // 优先捕获最上面的一层Promise异常
 }).catch(err => {

 })


 // 3.拒绝捕获问题 在promise.then 中没有告诉怎么处理异常,程序会推出
 promise.catch(err => {})

 
 

posted @ 2022-12-11 22:02  程序员包子  阅读(17)  评论(0)    收藏  举报