js高阶——Promise学习

最新推荐文章于 2024-06-24 14:51:36 发布

旺仔流奶

最新推荐文章于 2024-06-24 14:51:36 发布

阅读量493

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_38211443/article/details/104859614

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

2.如果给同一个promise指定多个成功/失败的回调函数，都调用吗？

3.改变promise状态和指定回调函数的顺序？

4.promise.then()返回的新的promise的结果状态由什么决定？

基本概念

实例对象：通过new 函数产生的对象

函数对象：将函数作为对象使用时，叫函数对象。

function Fn(){   //构造函数

}

const fn = new Fn() // fn——实例对象
console.log(Fn.protoype) // 通过.来访问函数Fn的属性，此时Fn是函数对象
Fn.call({})   // Fn是函数对象，所有函数对象都有这个call()属性，所以call其实定义在Function.prototype上

回调函数：

1.同步回调：立即执行，完全执行完成才结束，不放入回调队列中

eg：数组遍历的回调函数map/filter/reduce等 / Promise的excutor函数

2.异步回调：不会立即执行，而是放进回调队列中

eg：setTimeout(()=>{},s) 里面的回调函数

Pomise是什么？

1.理解： Promise是Js中进行异步编程的的新的解决方案（旧的是指纯回调函数形式，容易产生回调地狱）

2.具体：

从语法上来说：Promise就是一个构造函数
从功能上来说：promise对象用来封装一个异步操作，还能获取这个操作的结果。

3.promise的状态改变：一个promise对象只能改变一次

pending ——> resolved
pending ——> rejected

Promise基本使用：

// 1.创建一个新的promise对象
const p = new Promise((resolve,reject)=>{  //执行器函数
    // 2.执行异步任务
    setTimeout(()=>{
        const time = Date.now();
          // 3.1 如果成功，调用resolve(value)
        if (time %2 == 0){
            resolve('成功'+time)
        }else {   // 3.2 如果失败，调用reject(reason)
            reject('失败'+time)
        }
    },1000)
  
    
})

p.then(
    value => {  //接收得到的成功的value数据   onResolved
        console.log('成功的回调',value)
    },
    reason =>{ // 接收得到的失败的reason数据   onRejected
        console.log('失败的回调',reason)
    }
)

Promise和纯回调函数对比：

纯回调函数：需要先指定好回调函数，再调用回调函数来执行异步任务

Promise：可以先启动异步任务，（即在执行器函数中启动异步任务(即加入任务队列之中，因为执行器函数是同步回调，在new Promise的时候就执行) ）,甚至可以在异步任务执行完成之后再指定回调函数。

所以Promise的优势：

指定回调函数的方式更加灵活：
- 旧的：必须在启动异步任务之前指定好
- promise：启动异步任务—>返回promise对象—>给promise对象绑定回调函数（甚至可以在异步任务结束后）
支持链式调用，可以解决回调地狱问题
- 什么是回调地狱？回调函数嵌套使用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件
- 回调地狱的缺点？不便于阅读，不便于异常处理
- 解决方案？ promise链式调用 ——>async/await

Promise的API：

1.Promise构造函数：Promise(excutor) {}

excutor函数：同步执行： (resolve,reject )=>{}

resolve函数：excutor函数中成功时调用的函数： value=>{ }

reject函数：excutor函数中失败时调用的函数：reason=>{ }

excutor 在promise中立即同步执行，异步操作封装在excutor函数中执行

2.Pomise.prototype.then()方法：(onResolved,onRejected)=>{ }

onResolved函数：成功的回调函数

onRejected函数：失败的回调函数

用于指定成功或者失败的回调函数，返回一个新的promise对象

3.Promise.prototype.catch() 方法：(onRejected) =>{ }

用于指定失败的回调函数，相当于 then(null,onRejected)

4.Promise.resolve()方法：(value) => { }

value:成功的数据或者是一个promise对象

返回的是一个成功或者失败的promise对象

5.Promise.reject()方法

// 产生一个成功值为1的promise对象
const p1 = new Promise((resolve,reject)=>{
    resolve(1)
})

// 语法糖 
const p2 = Promise.resolve(1)

6.Promise.all() 方法：(promises) =>{ }

promises：包含n个promise的数组

返回一个新的promise，只有所有的promise都成功才算成功，有一个失败就失败了

7.Promise.race()方法: (promises)=>{ }

返回一个新的promise，是第一个完成的promise的结果状态。