ES6-Promise()解决回调地狱

迷南。 2021-12-05 04:25 398阅读 0赞

## 概述 ##

Promise 是异步编程的一种解决方案，它是一个构造函数，Promise 有属于自己的 all、reject、resolve等私有方法，其原型上有 then、catch 等方法。

使用 Promise 可以解决 “回调地狱” 的问题。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]  
Promise 对象表示尚未完成且在未来完成的事件（通常为一个异步操作）。

*  异步：可以一起执行**多个任务**，函数调用后不会立即返回执行的结果，如果任务A需要等待，可先执行任务B，等到任务A结果返回后再继续回调。

Promise 可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数（回调地狱）。

`Promise(callback)` 是一个构造函数，接收一个参数，该参数是一个带有 resolve 和 reject 两个参数的回调函数（回调函数中的 resolve 与 reject 这两个参数也是函数）。

创建 Promise 对象实例的语法：

> new Promise( function(resolve, reject) \{…\} )

参数：

*  `resolve` 操作成功调用的函数
 *  `reject` 操作失败调用的函数

Promise 对象有三个状态

*  pending：初始化状态
 *  fullfilled：操作成功的状态
 *  rejected：造作失败的状态

在 Peomise 的回调函数中可执行一些操作（例如异步）；如果一切都正常（操作成功）将 promise 的状态修改为 fullfilled，调用 resolve； 否则（操作失败）将 promise 的状态修改为 rejected，调用 reject。

在操作完成后 resolve 与 reject 只能调用一个（手动调用），resolve 与 reject 这两个函数都有一个参数，都是用于传递内容给 then() 方法的，具体用法见下文。

## Promise 的 then 方法 ##

`then` 方法是 Promise 构造函数原型上的方法，该方法返回的是一个 **新的** Promise 对象，因此可以采用链式调用的写法。

语法：

> promise.then(onFulfilled\[, onRejected\])

*  `promise` 通过 new Promise 创建的实例对象

参数：

*  `onFulfilled` 该参数是一个回调函数，当Promise状态为 fulfilled（成功状态） 时会自动调用该函数；该函数有一个参数，这个参数用来接收 Promise 实例对象中 resolve() 这个函数传递的参数。
 *  `onRejected` 该参数是一个回调函数，当Promise状态为 rejected（失败状态） 时会自动调用该函数；该函数有一个参数，这个参数用来接收 Promise 实例对象中 reject() 这个函数传递的参数。

在使用多个 then() 方法进行连缀时，上一个 then() 方法的回调函数执行完成以后，会将结果返回（是回调函数中 return 的结果，不 return 就会返回 undefined）如果前一个 then() 方法返回的是 **Promise对象** ，这时当前的 then() 方法就会等待该 Promise 对象有了运行结果，才会进一步调用当前 then() 方法的回调函数。

Promise 一些缺点：

*  一旦新建它就会立即执行，无法中途取消。
 *  如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。
 *  当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
 *  创建 Promise 对象，通过 then 进行链式编程

let promise = new Promise((resolve, reject) => { 
        // 初始化 promise 状态，（pending）
        console.log('promise-1')
        // 执行异步操作，例如：开启定时器，发送 ajax 请求等
        setTimeout(() => { 
            console.log('promise-2')
            
            // 异步操作执行成调用 resolve；将 promise 的状态改为 fulfilled 状态
            resolve('成功了！')   
            
            // 操作失败调用 reject；将 promise 的状态改为 rejected 状态
            // reject('失败了！')
        }, 1000)
        console.log('promise-3')
    })
    
    promise
      	.then((data) => { 
          	console.log(data)
          	console.log('异步操作执行成功执行的函数（调用了 resolve）')
      	}, (err) => { 
          	console.log(err)
          	console.log('操作失败执行的函数（调用了 reject）')
      	})

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20211205/517b3657137f4901afc1ed7cef67eae1.png