Promise 的三种状态：pending fulfilled rejected

1
2
3
4
5
6
7
8
9
10
11
12
const promise1 = new Promise((resolve, reject) =>{
    
})
console.log("promise1",promise1); // 此时 promise1 的状态为 pending

const promise2 = new Promise((resolve, reject) =>{
  setTimeout(()=>{
    console.log('promise2 resolve 前',promise2) // 此时 promise2 的状态为 pending
    resolve();
    console.log('promise2 resolve 后',promise2) // 此时 promise2 的状态为 fulfilled
  })
})

img.png

1
2
3
4
5
6
7
const promise3 = new Promise((resolve, reject) =>{
  setTimeout(()=>{
    console.log('promise3 resolve 前',promise2) // 此时 promise3 的状态为 pending
    resolve();
    console.log('promise3 resolve 后',promise2) // 此时 promise3 的状态为 rejected
  })
})

img.png

更为简便的方法， 定义时直接改变 Promise 的状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const promise4 = Promise.resolve('promise4 data')
console.log('promise4', promise4) //此时 promise4 状态为 fulfilled
promise4.then(data=>{
    console.log('data',data)
}).catch(err=>{
    console.log('error',err)
})
/*
* 如果 Promise 执行之后是 fulfilled 的状态，那么就会执行 then 当中的回调函数，同时 data 就是传的字符串，
* 不会执行到 catch 中
* */

const promise5 = Promise.reject('promise5 error')
console.log('promise5', promise5) //此时 promise4 状态为 rejected
promise5.then(data=>{
    console.log('data2',data2)
}).catch(err=>{
    console.log('error2',err2)
})

/*
* 同理，如果 Promise 执行之后是 rejected 的状态，那么就会执行 catch 当中的回调函数，
* 同时 err2 就是传的字符串，不会执行到 then 中
* */

控制台打印

Promise 解决回调地域

回调地狱示例

1
2
3
4
5
6
7
8
9
10
11
let fs = require('fs')
fs.readFile('./a.txt','utf8',function(err,data){
  fs.readFile(data,'utf8',function(err,data){
    fs.readFile(data,'utf8',function(err,data){
      console.log(data)
    })
  })
})

//代码耦合性太强，牵一发而动全身，难以维护
//大量冗余代码相互嵌套，可读性极差

解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let fs = require('fs')
function read(url){
  return new Promise((resolve,reject)=>{
    fs.readFile(url,'utf8',function(error,data){
      error && reject(error)
      resolve(data)
    })
  })
}

//promise 采用的是链式调用，而不是嵌套调用
read('./a.txt') //read 方法返回值为 Promise 的实例对象
    .then(data=>{   // .then 为第一个 Promise 实例成功之后的回调 
        return read(data)   // 在第一个 .then 中返回一个新的Promise 实例对象
    })
    .then(data=>{   // 调用 .then， 此为上一个 .then 的返回值（新的 Promise 实例）指定成功之后的回调
        return read(data)   // 再第二个 .then 中再返回一个新的 Promise 实例对象
    })
    .then(data=>{   // 调用 .then， 此为上一个 .then 的返回值（新的 Promise 实例）指定成功之后的回调
        console.log(data)   // 以此类推 链式调用，单层嵌套， 
    })