JS 的 Promise详解

@[TOC](JS 的 Promise详解)欧诺个鱼

1、概念

ES 6 开始支持 Promise。

Promise 对象用于一个异步操作的最终完成（包括成功和失败）及结果值的表示。简而言之，就是处理异步请求的。

之所以叫做 Promise，就是承诺做这件事，如果成功则怎么处理，失败则怎么处理。

// 语法
new Promise(
    // 下面定义的函数是 executor 
    function(resolve, reject) {
   
        ...
    }
)

2、executor

• executor 是一个带有 resolve 和 reject 两个参数的函数
• executor 函数在 Promise 构造函数执行时立即执行，被传递 resolve 和 reject 函数（executor 函数在 Promise 构造函数返回新建对象前被调用）
• executor 内部通常会执行一些异步操作，一旦完成，可以调用 resolve 函数来将 Promise 状态改成 fulfilled （即完成），或者在发生错误时将它的状态改为 rejected （即失败）
• 如果在 executor 函数中抛出一个错误，那么该 Promise 状态为 rejected 。executor 函数的返回值被忽略
• executor 中，reslove 或 reject 只能执行其中一个函数

3、Promise 的状态

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

3.1 setInterval 介绍

# 间隔多少毫秒就执行函数一次，循环执行
	# function 延时到的时候执行的函数
	# delay 延时，缺省0，立即执行
setInterval(function[,delay]);

setInterval(() => {
   
    console.log('I am working!')
}, 1000)

Info: Start process (上午10:26:11)
I am working!
I am working!
I am working!
Process canceled // F9
Info: End process (上午10:26:19)

3.2 setTimeout 介绍

# 等待多少毫秒就执行函数一次，结束
	# function 延时到的时候执行的函数
	# delay 延时，缺省0，立即执行
setTimeout(function[,delay]);

setTimeout(() => {
   
    console.log('I am working!')
}, 2000)

Info: Start process (上午10:38:25)
I am working!
Info: End process (上午10:38:28)

3.3 Promise 状态示例

var myPromise = new Promise(function(resolve, reject){
   
    console.log(1, 'Do sth.')
    setTimeout(() => {
   
        console.log(2, '========');
        resolve('Ok.');
    }, 3000);
})

console.log(3, myPromise)

setInterval(() => {
   
    console.log(4, myPromise, '++++++++')
}, 1000)

Info: Start process (上午10:48:49)
1 'Do sth.'
3 Promise {
    <pending> }
4 Promise {
    <pending> } '++++++++'
4 Promise {
    <pending> } '++++++++'
2 '========'
4 Promise {
    'Ok.' } '++++++++'
4 Promise {
    'Ok.' } '++++++++'
Process canceled
Info: End process (上午10:48:59)

4、Promise.then（onFulfilled, onRejected）