Promise 初探

本文首发于 语雀
⏰学习学习，我爱学习～

函数对象与实例对象

函数对象：将函数作为对象使用，简称函数对象

实例对象：new 函数产生的对象，简称为对象

两种类型的回调

• 同步回调

理解： 立即执行，完全执行完了才结束，不会放入回调队列中。

🌰：数组遍历相关的回调函数 / Promise 的 excutor 函数

new Promise( function(resolve, reject) {...} /\* executor \*/ );

executor是带有 resolve 和 reject 两个参数的函数 。Promise构造函数执行时立即调用executor 函数， resolve 和 reject 两个函数作为参数传递给executor（executor 函数在Promise构造函数返回所建promise实例对象前被调用）

const arr = [1, 2, 3, 'hello world', 'BeiJing'];
arr.forEach(item => console.log(item)) 
// 同步回调，不会放入回调队列，而是立即
console.log('forEach()之后')

⇣⇣⇣

• 异步回调

理解：不会立即执行，会放入回调队列中将来执行。

🌰：定时器回调 / ajax回调 / Promise 的成功｜失败的回调

setTimeout(() => { 
// 异步回调，会放入回调队列，所有同步执行完后才可能执行        
    console.log('定时器回调') 
}, 0) 
console.log('setTimeout 之后') 
console.log('1+3 = ' + 1+3) 
console.log('3 \* 9 = ' + 3\*9)

⇣⇣⇣

JS的错误处理

• Error：所有错误的父类型
• ReferenceError：引用的变量不存在
• TypeError: 数据类型不正确的错误
• RangeError: 数据值不在其所允许的范围内
• SyntaxError: 语法错误

🥬 Promise 

它是什么

• 抽象表达：Promise 是 JS 中进行异步编程的新的解决方案(旧的是谁?)

• 具体表达：

  • 语法上：Promise 是一个构造函数
  • 功能上：promise 对象用来封装一个异步操作并且可以获取其结果

// 1. 创建一个新的promise对象  
const p = new Promise((resolve, reject) => {
    // 执行器函数  同步回调 
    console.log('执行 excutor') 
    // 2. 执行异步操作任务 
    setTimeout(() => { 
        const time = Date.now() // 如果当前时间是偶数就代表成功, 否则代表失败 
        // 3.1. 如果成功了, 调用resolve(value) 
        if (time %2 \== 0) { 
            resolve('成功的数据, time=' + time)
        } else { 
        // 3.2. 如果失败了, 调用reject(reason) 
        reject('失败的数据, time=' + time) 
        } 
    }, 1000);  
}) 
console.log('new Promise()之后')   
setTimeout(() => { 
    p.then( value => { 
    // 接收得到成功的value数据    onfulfilled 
    console.log('成功的回调', value) 
    }, reason => {
    // 接收得到失败的reason数据  onrejected 
    console.log('失败的回调', reason) } 
    ) 
}, 2000);

Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象

一个 Promise有以下几种状态:

• pending : 初始状态，既不是成功，也不是失败状态。
• fulfilled：意味着操作成功完成。
• rejected：意味着操作失败。

⚠️

then方法包含两个参数：onfulfilled 和 onrejected，它们都是 Function 类型。当Promise状态为 fulfilled 时，调用 then 的 onfulfilled 方法，当Promise状态为 rejected 时，调用 then 的 onrejected 方法， 所以在异步操作的完成和绑定处理方法之间不存在竞争

因为 Promise.prototype.then 和 Promise.prototype.catch方法返回promise 对象， 所以它们可以被链式调用。

为什么要使用它

• 指定回调的方式更加灵活：

  • 旧的：必须在启动异步任务前指定
  • promise：启动异步任务 --> 返回promise对象 --> 给promise对象绑定回调函数(甚至可以在异步任务结束后指定)

• 支持链式调用，可以解决回调地狱的问题

  • 什么是回调地狱？回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件。
  • 回调地狱的缺点？不便于阅读 / 不便于异常处理
  • 解决方案：promise 链式调用
  • 终极解决方案：async/await