【Promise 】必知必会经典题

约定不等于承诺〃 2021-12-13 19:17 378阅读 0赞

题目转载来自：[https://github.com/nswbmw/node-in-debugging/blob/master/3.1 Promise.md][https_github.com_nswbmw_node-in-debugging_blob_master_3.1 Promise.md]

如何写出清晰优雅的代码也是调试重要的一部分，而在过去很长一段时间内，JavaScript 最令人吐槽的就是回调地狱（callback hell）了。先看一段代码：

现在，我们以十道题巩固一下前面所学到的 Promise 的知识点。

### 题目一: Promise构造函数 ###

const promise = new Promise((resolve, reject) => { 
      console.log(1)
      resolve()
      console.log(2)
    })
    promise.then(() => { 
      console.log(3)
    })
    console.log(4)

运行结果：

1
    2
    4
    3

**解释**：Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的。

### 题目二： Promise状态机 ###

const promise1 = new Promise((resolve, reject) => { 
      setTimeout(() => { 
        resolve('success')
      }, 1000)
    })
    const promise2 = promise1.then(() => { 
      throw new Error('error!!!')
    })
    
    console.log('promise1', promise1)
    console.log('promise2', promise2)
    
    setTimeout(() => { 
      console.log('promise1', promise1)
      console.log('promise2', promise2)
    }, 2000)

运行结果：

promise1 Promise { <pending> }
    promise2 Promise { <pending> }
    (node:50928) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: error!!!
    (node:50928) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    promise1 Promise { 'success' }
    promise2 Promise {
      <rejected> Error: error!!!
        at promise.then (...)
        at <anonymous> }

**解释**：promise 有 3 种状态：pending、fulfilled 或 rejected。状态改变只能是 pending->fulfilled 或者 pending->rejected，状态一旦改变则不能再变。上面的 promise2 并不是 promise1，而是返回的一个新的 Promise 实例。

### 题目三： Promise状态的不可改变 ###

const promise = new Promise((resolve, reject) => { 
      resolve('success1')
      reject('error')
      resolve('success2')
    })
    
    promise
      .then((res) => { 
        console.log('then: ', res)
      })
      .catch((err) => { 
        console.log('catch: ', err)
      })

运行结果：

then: success1

**解释**：构造函数中的 resolve 或 reject 只有在第 1 次执行时有效，多次调用没有任何作用，再次印证代码二的结论：promise 状态一旦改变则不能再变。

再看两个例子：

const promise = new Promise((resolve, reject) => { 
      console.log(1)
      return Promise.reject(new Error('haha'))
    })
    promise.then((res) => { 
      console.log(2, res)
    }).catch((err) => { 
      console.error(3, err)
    })
    console.log(4)
    console.log(promise)

运行结果：

1
    4
    Promise { <pending> }
    (node:22493) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: haha
    (node:22493) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

const promise = new Promise((resolve, reject) => { 
      console.log(1)
      throw new Error('haha')
    })
    promise.then((res) => { 
      console.log(2, res)
    }).catch((err) => { 
      console.error(3, err)
    })
    console.log(4)
    console.log(promise)

运行结果：

1
    4
    Promise {
      <rejected> Error: haha
        at Promise (/Users/nswbmw/Desktop/test/app.js:6:9)
        ...
    3 Error: haha
        at Promise (/Users/nswbmw/Desktop/test/app.js:6:9)
        ...

**解释**：构造函数内只能通过调用 resolve(pending->fullfiled) 或者 reject(pending->rejected) 或者 throw 一个 error(pending->rejected) 改变状态。所以第一个例子的 promise 状态是 pending，也就不会调用 .then/.catch。

### 题目四： Promise链式调用 ###

Promise.resolve(1)
      .then((res) => { 
        console.log(res)
        return 2
      })
      .catch((err) => { 
        return 3
      })
      .then((res) => { 
        console.log(res)
      })

运行结果：

1
    2

**解释**：promise 可以**链式调用**。提起链式调用我们通常会想到通过 return this 实现，不过 Promise 并不是这样实现的。promise 在每次调用 .then 或者 .catch 时都会返回一个新的 promise，从而可以实现链式调用。

Axios就是通过链式调用来实现拦截器的；原理如下：

/** 简单解释链式调用，定义一个promiseRequest */
    let requestPromise = function () { 
      let chain = [{ 
        resolved: () => {  console.log('xhr'); return 'xhr'},
        rejected: () => 'rejected'
      }]
    
      let requestInters = ['request1', 'request2', 'request3']
      requestInters.forEach(request => { 
        chain.unshift({ 
          resolved: () => {  console.log(request); return request},
          rejected: () => `${ err}${ request}`
        })
      })
    
      let responseInters = ['response1', 'response2', 'response3']
      responseInters.forEach(response => { 
        chain.push({ 
          resolved: () => {  console.log(response); return response},
          rejected: () => `${ err}${ response}`
        })
      })
    
      let promise = Promise.resolve('config')
    
      while (chain.length) { 
        let {  resolved, rejected } = chain.shift()
        // 精华都是在这句
    
        promise = promise.then(resolved, rejected)
      }
      // return promise调用链
      // promise.then(resolved1, rejected1).then(resolved2, rejected2).then(resolved2, rejected3).then() ....
      return promise
    }
    
    requestPromise().then(res => { 
    
      console.log(res)
      // request3
      // request2
      // request1
      // xhr
      // response1
      // response2
      // response3
      // response3
    })

### 题目五： Promise内部状态 ###

const promise = new Promise((resolve, reject) => { 
      setTimeout(() => { 
        console.log('once')
        resolve('success')
      }, 1000)
    })
    
    const start = Date.now()
    promise.then((res) => { 
      console.log(res, Date.now() - start)
    })
    promise.then((res) => { 
      console.log(res, Date.now() - start)
    })

运行结果：

once
    success 1005
    success 1007

**解释**：promise 的 .then 或者 .catch 可以被调用多次，但这里 Promise 构造函数只执行一次。或者说，promise 内部状态一经改变，并且有了一个值，则后续在每次调用 .then 或者 .catch 时都会直接拿到该值。

这在我们平时的promise缓存中是很有用的，比如app启动时可以暂存promise，在没有返回时，将promise直接给其他调用方，而不是每次调用都去new 一个新的promise.

### 题目六： Promise错误的正常抛出 ###

Promise.resolve()
      .then(() => { 
        return new Error('error!!!')
      })
      .then((res) => { 
        console.log('then: ', res)
      })
      .catch((err) => { 
        console.log('catch: ', err)
      })

运行结果：

then: Error: error!!!
        at Promise.resolve.then (...)
        at ...

**解释**：.then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获，需要改成如下其中一种：

1.  return Promise.reject(new Error(‘error!!!’))
2.  throw new Error(‘error!!!’)

因为返回任意一个非 promise 的值都会被包裹成 promise 对象，即 `return new Error('error!!!')` 等价于 `return Promise.resolve(new Error('error!!!'))`。

### 题目七： 小心Promise死循环 ###

const promise = Promise.resolve()
      .then(() => { 
        return promise
      })
    promise.catch(console.error)

运行结果：

TypeError: Chaining cycle detected for promise #<Promise>
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
        at Function.Module.runMain (module.js:667:11)
        at startup (bootstrap_node.js:187:16)
        at bootstrap_node.js:607:3

**解释**：.then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环。类似于：

process.nextTick(function tick () { 
      console.log('tick')
      process.nextTick(tick)
    })

### 题目八：Promise值穿透 ###

Promise.resolve(1)
      .then(2)
      .then(Promise.resolve(3))
      .then(console.log)

运行结果：

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

### 题目九：Promise错误捕获 ###

Promise.resolve()
      .then(function success (res) { 
        throw new Error('error')
      }, function fail1 (e) { 
        console.error('fail1: ', e)
      })
      .catch(function fail2 (e) { 
        console.error('fail2: ', e)
      })

运行结果：

fail2: Error: error
        at success (...)
        at ...

**解释**：.then 可以接收两个参数，第 1 个是处理成功的函数，第 2 个是处理错误的函数。.catch 是 .then 第 2 个参数的简便写法，但是在用法上有一点需要注意：.then 的第 2 个处理错误的函数（fail1）捕获不了第 1 个处理成功的函数（success）抛出的错误，而后续的 .catch 方法（fail2）可以捕获之前的错误。当然，以下代码也可以：

Promise.resolve()
      .then(function success1 (res) { 
        throw new Error('error')
      }, function fail1 (e) { 
        console.error('fail1: ', e)
      })
      .then(function success2 (res) { 
      }, function fail2 (e) { 
        console.error('fail2: ', e)
      })

### 题目十： Promise与事件循环 ###

Promise.resolve()
      .then(() => { 
        console.log('then')
      })
    process.nextTick(() => { 
      console.log('nextTick')
    })
    setImmediate(() => { 
      console.log('setImmediate')
    })
    console.log('end')

运行结果：

end
    nextTick
    then
    setImmediate

**解释**：`process.nextTick` 和 `promise.then` 都属于 microtask（但 process.nextTick 的优先级大于 promise.then），而 setImmediate 属于 macrotask，**在事件循环的 check 阶段执行。事件循环的每个阶段（macrotask）之间都会执行 microtask**，以上代码本身（macrotask）在执行完后会执行一次 microtask。

[https_github.com_nswbmw_node-in-debugging_blob_master_3.1 Promise.md]: https://github.com/nswbmw/node-in-debugging/blob/master/3.1%20Promise.md