Promise的基本知识

promise是干什么的

1. proomise是解决异步编程的一种方式，也避免了回调地狱。
2. 有三种状态pending,fulfilled,rejected。状态一旦发生改变就不会再次变化（从pending状态变成fulfilled或者rejected）。
3. 一创建就执行
4. .then()，.catch()是放在微任务队列里面的
5. promise的实现原理可以看这里segmentfault.com/a/119000001…

promise的方法

1. .then()
2. .catch()
3. .finally()
4. .resolved()
5. .rejected()
6. Promise.all()
7. Promise.race()

promise的简单实用

//调用接口，发送请求
fetch = (fetchObj) => {
  let headers = {
    'Conrtent-Type': 'application/json'
  }
  headers.Authorization = this.token 
  return new Promise(function (resolve,reject){
    axios({
      ...fetchObj,
      timeout: 30000,
      headers
    })
    .then(function(response){
      resolve(response)
    })
    .catch(function(err){

      if(err.response){
        //这里知识为了打印看一下错误信息
        let obj = {
        status:err.response.status, //错误码
        statusText:err.response.statusText //错误信息
      }
      console.log(obj)
      }
    
      reject(err)
    })
  })
}

Promise.all()和Promise.race()的区别

1. .all()是等待参数中所有的promise执行完成，全部成功返回成功数组,失败返回失败数据,一旦失败就不会继续往下走。

let p1 = new Promise(function(resolve,reject){
  console.log('执行p1')
  resolve('p1')
})
let p2 = new Promise(function(resolve,reject){
   console.log('执行p2')
   resolve('p2')
})
let p3 = new Promise(function(resolve,reject){
   console.log('执行p3')
  resolve('p3')
})

let p = Promise.all([p1,p2,p3])
p.then((res)=>{
  console.log("res",res)
}).catch((err)=>{
  console.log('err',err)
})
// 执行p1
// 执行p2
// 执行p3
//[p1,p2,p3]


let p1 = new Promise(function(resolve,reject){
  console.log('执行p1')
  resolve('p1')
})
let p2 = new Promise(function(resolve,reject){
   console.log('执行p2')
  reject('p2')
})
let p3 = new Promise(function(resolve,reject){
   console.log('执行p3')
  resolve('p3')
})

let p = Promise.all([p1,p2,p3])
p.then((res)=>{
  console.log("res",res)
}).catch((err)=>{
  console.log('err',err)
})
// 执行p1
// 执行p2
// 执行p3
//[p2]

2. .race()的结果是参数中第一个执行完成的promise的结果，不管结果本身是成功还是失败。（race只会获取最先执行完成的那个promise的结果，其他异步任务虽然也会执行下去，不过race已经不管那些异步任务的执行结果了。）

let p1 = new Promise(function(resolve,reject){
  console.log('执行p1')
  resolve('p1')
})
let p2 = new Promise(function(resolve,reject){
   console.log('执行p2')
  reject('p2')
})
let p3 = new Promise(function(resolve,reject){
   console.log('执行p3')
  resolve('p3')
})

let p = Promise.race([p1,p2,p3])
p.then((res)=>{
  console.log("res",res)
}).catch((err)=>{
  console.log('err',err)
})
// 执行p1
// 执行p2
// 执行p3
// res p1

let p1 = new Promise(function(resolve,reject){
  console.log('执行p1')
  reject('p1')
})
let p2 = new Promise(function(resolve,reject){
   console.log('执行p2')
  reject('p2')
})
let p3 = new Promise(function(resolve,reject){
   console.log('执行p3')
  resolve('p3')
})

let p = Promise.race([p1,p2,p3])
p.then((res)=>{
  console.log("res",res)
}).catch((err)=>{
  console.log('err',err)
})
// 执行p1
// 执行p2
// 执行p3
// err p1

promise的值传透

.then 或者 .catch 的参数期望是函数，传入非函数则会发生值透传。

Promise.resolve(1)
.then(2)
.then(3)
.catch(4)
.then((res)=>{
  console.log(res)
})
.catch(5)
// 1

promise的异常穿透

此处要关注.then的第二个参数是否是空

Promise.reject(1)
  .then((res)=>{
    console.log("第一个then") //.then是接受两个参数的，执行失败会进入第二个参数，此时第二个参数是null，此时想象与接受到了上面的2，然后throw 2.下面的then也是同理
  })
  .then((res)=>{
    console.log("第二个then")
  })
  .catch(err=>{console.log(err)}) //此处接收的是最开始的reject的1
  //1

Promise.reject(1)
  .then((res)=>{
    console.log("第一个then") //.then是接受两个参数的，执行失败会进入第二个参数
  },err=>{console.log(err)} //此时.then有第二个参数，这个时候就会进入这里
  ) 
  .then((res)=>{
    console.log("第二个then") //这里也会执行，因为上面的第二个参数中执行完成，返回了一个成功的promise
  })
  .catch(err=>{console.log(err)}) 
// 1 
// 第二个then

promise的中断

可以返回一个新的promise来中断promise，新的promise的状态是pending

Promise.resolve(1)
  .then((res)=>{
    console.log("第一个then",res) 
  })
  .then((res)=>{
    console.log("第二个then",res)
  }).then((res)=>{
    console.log("中断promise的then",res)
    return new Promise(()=>{})
  }).then((res)=>{
    console.log("中断promise之后的then",res)
  })
  .catch(err=>{console.log(err)})
  
  //第一个then 1
  //第二个then undefined
  //中断promise的then undefined