普歌-Promise用法

Promise概述

Promise是异步编程的一种解决方案，从语法上来讲，Promise是一个对象，从而它可以获取异步操作的消息

使用Promise主要有以下好处：

可以避免多层异步调用嵌套问题（回调地狱）
Promise对象提供了简洁的API，使得控制异步操作更加容易

Promise基本用法

实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败两种情况，并通过Promise.then获取处理结果

var p = new Promise(function(resolve,reject){
   // 成功时调用 resolve()
   // 失败时调用 reject()
});
p.then(function(res){
   // 从resolve得到正常结果
},function(ret){
   // 从reject得到错误信息
})

基于Promise处理Ajax请求

1.处理原生Ajax

function queryData(){
  return new Promise(function(resolve,reject){
     var xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function(){
       if(xhr.readyState != 4) return;
       if(xhr.status == 200) {
          resolve(xhr.responseText)
       }else{
          reject('出错了')
       }   
     }
     xhr.open('get','/data');
     xhr.send(null)
  })
}

2.发送多次Ajax请求

queryData()
   .then(function(data){
      return queryData()
   })
   .then(function(data){
      return queryData()
   })
   .then(function(data){
      return queryData()
   })

3.then参数中的函数返回值

• 返回Promise实例对象

返回的该实例对象会调用下一个then

• 返回普通值

返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

4.Promise常用的API

• 实例方法

p.then() 得到异步任务的正确结果
p.catch() 获取异常信息
p.finally() 成功与否都会执行（尚且不是正式标准）

queryData()
   .then(function(data){
      console.log(data)
   })
   .catch(function(data){
      console.log(data)
   })
   .finally(function(data){
      console.log('finished')
   })

• 对象方法

Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果
Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果

Promise.all([p1,p2,p3]).then((res)=>{
   console.log(res)
})

Promise.race([p1,p2,p3]).then(res)=>{
   console.log(res)
}

Promise的三种状态

• pending resolved rejected
• pending ==> resolved 或 pending ==>rejected （变化不可逆）

pending状态，不会触发 then 和 catch
resolved状态，会触发后续的 then 回调函数
rejected状态，会触发后续的 catch 回调函数

then 和 catch 改变状态

then 正常返回 resolved，里面有报错则返回 rejected
catch 正常返回 resolved，里面有报错则返回 rejected

还有一点注意！！
resolved 触发后续的 then 回调
rejected 触发后续 catch 回调

const p3 = Promise.reject('error').catch(err => {
   console.log(err)
})
console.log('p3',p3) // resolved 注意！！

老样子，看题 ==> ⭕️

1.第一题

Promise.resolve().then(() => {
   console.log(1) // 1 resolved 注意！触发 catch 回调
}).catch(() => {
   console.log(2) // 不走这儿
}).then(() => {
   console.log(3) // 3 resolved
})

2.第二题 这儿会有一个坑

Promise.resolve().then(() => {
   console.log(1) // 1 
   throw new Error('error') // rejected 注意！触发 catch 回调
}).catch(() => {
   console.log(2) // 2 resolved 注意！触发 then 回调
}).then(() => {
   console.log(3) // 3
})

3第三题

Promise.resolve().then(() => {
  console.log(1) // 1
  throw new Error('error') // rejected
}).catch(() => {
  console.log(2) // 2
}).catch(() => {
  console.log(3)
})

---

相关推荐：Cnc_zj的《普歌-事件循环》

---

作者：Cnc_zj
本文源自：Cnc_zj的《普歌-Promise用法》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。