Promise解析

Promise使用场景

1. 回调地狱：当你发送一个ajax请求，继而又需要请求一个ajax请求，并且此ajax请求参数是上一个ajax请求返回的参数，然后，又有一个ajax请求。。。这样的调用，就陷入了回调地狱。这个时候Promise是帮上忙的时候了嘿！
2. 代码的可读性和可维护性：将数据请求和数据处理明确区分开（当数据变得复杂，就需要将数据请求和数据处理分离开，增加代码的可读性和可维护性）

Promise基本知识

1. Promise的三种状态：

• pending：等待（进行）状态
• resolved：结束状态，并且是成功执行
• rejected：结束状态，并且是失败执行
  （注：三种状态的转变只有两种情况，pending=>resolved，pending=>rejected）

2. Promise基本使用方法
   Promise中then传递两个参数，和使用catch有什么区别

function fetch() {
  return new Promise((resolve, reject)=> {
    // resolve，预想的执行情况，其中resolve可以携带参数，也可以不带参数
    ....
    resolve(data)
    // reject，非预想的执行情况，其中reject可以携带参数，也可以不带参数
    ...
    reject(err)
  })
}
// 第一种  调用fetch，fetch().then()传入两个参数，第一个是resolve()，第二个是reject()
fetch().then(function(data){
  console.log('预想状态执行成功')
}, 
function(err) {
  console.log('非预想状态执行')
})
// 第二种  调用fetch，使用catch来执行reject
fetch().then(function(data){
    console.log('预想状态执行成功')
  }).catch(function(err) {
    console.log('非预想状态执行')
  })
}

（注：两种方式调用fetch的不同之处：then传入两个参数function，代表的是异步操作拒绝；而使用catch，代表中断调用链，如果连续几个异步任务，其中某个一步任务处理失败了，那么接下来的几个任务很大程度上就不需要继续处理了，那这个时候使用catch就是中断了调用链；但是catch还有try catch的作用，如果then()中逻辑代码执行失败了，并不会在控制台抛出，而是直接走到catch捕获）

Promise.all()方法的使用

• 本扩展实现将多个异步操作合并到一个操作中，只有全部的请求都正确执行，才会走到resolve中，否则走的都是reject，要么全部都有，要么全部都无

// 第一个promise操作
function fetch1() {
  return new Promise((resolve, reject) => {
    resolve('fetch1')
  })
}
// 第二个promise操作
function fetch2() {
  return new Promise((resolve, reject) => {
    resolve('fetch2')
  })
}
// 第三个promise操作
function fetch3() {
  return new Promise((resolve, reject) => {
    resolve('fetch3')
  })
}
Promise([fetch1(), fetch2(), fetch3()]).then(
  function(data) => {
    console.log(data) // data是一个数组，包含了全部返回的结果
  },
  function(err) {
    console.log(err)
  })

• 如果其中一个执行错误了，还是想继续往下执行咋办嘞？

如果作为参数的Promise实例，自己定义了catch方法，那么它一旦被reject，并不会触发Promise.all()的catch方法，而是走了Promise.all()方法的resolved
下面的例子，既然有一个执行错误，也进入resolve()中

let promiseArray = [fetch1(), fetch2(), fetch3()]
var handlePromise = Promise.all(promiseArray.map(function(promiseItem) {
  return promiseItem.catch(function(err) {
    return err
  })
}))
handlePromise.then(function(values) {
    console.log('all promise are resolved', values)
}).catch(function(reason) {
    console.log('promise reject failed reason', reason)
})

Promise.race()

并列几个异步操作，谁先处理结束就以谁为准
如果一个Promise()状态，在几秒之后还是没有结束，那么就将他改为reject状态

let readyPromise = new Promise((resolve, reject) => {
  // ...成功状态
  resolve()
  // ...失败状态
  reject()
})
let timeout = new Promise((resolve, reject) => {
  setTimeout(function(){
    reject()
  }, 5000)
})
Promise.race([readyPromise, timeout])

感谢您的view，留个赞再走呗

• 感谢浏览姑娘的文章，来自一个写前端的姑娘！