es6新特性---Promise详解

Promise用来解决回调地狱的问题

1、promise有三个状态:(生命周期)

  • pending 初始状态
  • fulfilled 成功状态
  • rejected 失败状态

Promise从被new出来的那一刻起,就开始了他的生命周期(Promise的状态会在[[PromiseStatus]]中体现)。初始的状态被称为Pending,这种状态表示异步操作处在挂起期,说明异步操作尚未完成。而异步操作一旦完成,Promise就被认为是settled状态了,并且会进入一下两种状态的其中一种:

1.fulfilled(已完成):表示异步操作成功结束;

2.rejected(已拒绝):表示异步操作未成功结束,期间可能发生了错误。

2、promise方法

  • then方法

  then方法存在于所有Promise对象上,并且接收两个参数。第一个参数是Promise状态为fulfilled(成功结束)的调用函数,第二个则是状态rejected(未成功结束)的调用函数。

 promise.then(res => {
          console.log(res)
},err => {
console.error(err)
})
//也可以进行链式操作
promise.then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})
  • catch方法
promise.catch(err => {
 console.log(err) }) 
// 等同于 
promise.then(null,err => {
 console.error(err) 
})
  • all()方法

promiss处理多个并发请求,在同一个页面需要等两个或多个ajax的请求返回数据才会正常显示时使用!

let p1 = Promise.resolve(1), p2 = Promise.resolve(22), p3 = Promise.resolve(333);
let loading = true; 
// 比方说加loading就可以加一个了 写个伪代码 
Promise.all([p1,p2,p3]).then(res => { 
    console.log(res) // [1, 22, 333] 
    loading = false  //伪代码 
})

这里返回数据的顺序是根据传进去的promise对象的顺序,如果其中有一个reject了,后面的代码会立刻停止,并将错误信息返回到catch里

  • race()方法

取出响应最快的那个请求,不管结果本身是成功状态还是失败

let p1 = Promise.resolve(1), p2 = Promise.resolve(22), p3 = Promise.resolve(333);
Promise.race([p1,p2,p3]).then(res => { 
    console.log(res) // 1 
})

promise原理详解

Promise原理详解(一) - 知乎

猜你喜欢

转载自blog.csdn.net/m0_37756431/article/details/123828416