Promise详解,关于Promise的用法,API和注意问题

1.概念

1. 什么是回调地狱?

回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调执行的条件。

2. 回调地狱的缺点?

  1. 不便于阅读
  2. 不便于异常处理

3. 解决方案?

使用promise

4. promise的优点

1. 可以解决回调地狱问题,支持链式调用
2.指定回调的方式更为灵活

2.使用

new Promise((resolve,reject)=>{
    resolve(a) // 成功后调用
    reject(b)  //失败后调用
}).then(
	(a)=>{//成功后的结果}
    (b)=>{//失败后的结果}
)

3.Promise的状态

实例对象的属性:【PromiseState】

  1. pending 未决定的
  2. resolved / fullfilled 成功
  3. rejected 失败

状态改变只有两个:

  1. pending —> resolved 未决定到成功
  2. pending —> rejected 未决定到失败

TOP: 只有这两种转换状态,且一个promise对象只能改变一次,无论变为成功还是失败,都会有一个结果数据,成功的结果数据一般称为value,失败的结果数据一般成为reason

实例对象另一个属性:【PromiseResult】

  • 里面存储的是异步任务成功或失败的结果,两个结果resolve和reject

4. promise API

  1. promise 构造函数

    Promise((resolve,reject)=>{
        resolve()
        reject()
    })
    // Promise构造函数有一个参数,是一个函数
    // 这个函数中有两个参数,第一个参数标识成功的回调,第二个参数标识失败的回调
    
  2. .then 方法

    .then((value)=>{},(reason)=>)
    // then方法有两个参数,都是函数
    // 第一个参数代表 成功获取的值
    // 第二个参数代表 失败获取的值
          // 返回promise对象
    
  3. .catch 方法

    .catch(reason=>{})
    // .catch方法有一个参数,是一个函数,代表的是失败的值
    
  4. Promise.resolve() 方法

    // 返回一个成功/失败的promise对象
    Promise.resolve()
    // 如果传入的参数为非Promise类型的对象,则返回的结果为成功的promise对象
    // 如果传入的参数为Promise对象,则参数的结果决定了resolve的结果
    
  5. Promise.reject() 方法

    // 返回一个失败的promise对象
    Promise.reject() // 始终返回一个失败的结果
    
  6. Promise.all() 方法

    Promise.all([p1,p2,p3...])
    // 参数里包含多个Promise的数组,返回一个新的promise,只有所有promise都成功才会成功,只要有一个失败那么就直接失败
    
  7. Promise.race() 方法

    Promise.race([p1,p2,p3...])
    // 参数包含多个Promise的数组,返回一个新的promise,第一个完成的promise的结果状态就是最终结果的状态
    

5. Promise 对象状态改变的方式

  1. resolve 函数

    resolve('ok') pending => fulfilled(resolved)

  2. reject 函数

    reject("error") pending => rejected

  3. 抛出错误

    throw '出问题了' pending => rejected

6. 一个promise 指定多个成功/失败回调函数,都会调用吗?(一个promise多次使用then)

当promise改变为对应状态时都会调用,但是当状态是pending时候,则不会调用

7. 改变promise状态和指定回调函数(then)谁先谁后?

  1. 都有可能,正常情况下是先指定回调再改变状态,但是也可以先改变状态再指定回调
  2. 当执行器中直接调用resolve()/reject(),也就说执行器内部执行的是同步任务,那么这个时候就说先改变状态,后执行指定回调函数,或者是让指定回调函数延迟更长的时间
  3. 什么时候才能得到数据?
    1. 如果先指定的回调,那当状态发生改变时,回调函数就会调用,得到数据
    2. 如果先改变的是状态,那当指定回调时,回调函数就会调用,得到数据

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

  1. 简单表达:由then()指定的回调函数执行结果决定
  2. 详细表达:
    1. 如果抛出异常,新promise变为rejected,reason为抛出的异常
    2. 如果返回的是非promise的任意值,新promise变为resolved,value为返回的值
    3. 如果返回的是另一个新promise,此promise的结果就会成为新promise的结果

9.promise如何串联多个操作任务?

  1. promise的then()会返回一个新的promise,可以继续then()进行链式调用
  2. 通过then的链式调用串联多个同步/异步任务

10.promise异常穿透

  1. 当使用promise的then链式调用时,可以在最后指定失败的catch回调
  2. 前面任何操作除了异常,都会传送到最后失败的回调中处理

11.中断promise链?

  1. 当使用promise的then链式调用时,在中间中断,不再调用后面的回调函数

  2. 办法:在回调函数中返回一个pendding状态的promise对象

    p.then(value=>{
        //  成功操作...
        return new Promise(()=>{}) // 返回一个pendding状态的promise就可以中断
    })
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 中的 Promise 对象可以使用 `.then()` 方法来处理异步操作的结果。当 Promise 对象的状态变为成功时(即 `resolve` 方法被调用),`.then()` 方法会执行其回调函数;当状态变为失败时(即 `reject` 方法被调用),则会执行 `.catch()` 方法指定的回调函数。 `.then()` 方法可以接受两个参数,第一个是成功时的回调函数,第二个是失败时的回调函数(可选)。如果没有指定第二个回调函数,则在发生错误时会自动转到 `.catch()` 方法指定的回调函数。 例如,下面的代码演示了如何在 Vue.js 中使用 `.then()` 方法: ```javascript axios.get('/api/user/1') .then(function (response) { // 处理成功的响应 console.log(response.data); }) .catch(function (error) { // 处理失败的响应 console.log(error); }); ``` 在这个例子中,我们使用 Axios 库向后端发送请求。如果请求成功,`.then()` 方法会将响应的数据传递给回调函数,并将其打印到控制台中;如果请求失败,则会将错误信息传递给 `.catch()` 方法指定的回调函数。 需要注意的是,`.then()` 方法返回的是一个新的 Promise 对象,因此可以使用链式调用来处理多个异步操作: ```javascript axios.get('/api/user/1') .then(function (response) { // 处理第一个请求的响应 console.log(response.data); // 发送第二个请求 return axios.get('/api/user/2'); }) .then(function (response) { // 处理第二个请求的响应 console.log(response.data); }) .catch(function (error) { // 处理失败的响应 console.log(error); }); ``` 在这个例子中,我们在第一个请求成功后,使用 `.then()` 方法发送了第二个请求。如果第二个请求也成功,则会将响应的数据传递给第二个回调函数。如果任何一个请求失败,则会跳转到 `.catch()` 方法指定的回调函数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值