Promise基本认识

妖狐艹你老母 2021-12-14 23:51 239阅读 0赞

### Promise基本认识 ###

*   *  什么是Promise?
     *  为什么需要Promise
     *  Promise作用
     *   *  处理回调demo
         *  结合generator函数和async/await控制异步的操作流程
     *  基本使用和Api了解
     *   *  构造函数
         *  语法
         *  方法
         *  原型
     *  参考链接

## 什么是Promise? ##

1.  通俗一点就是一种写代码的方式，并且是用来写JavaScript编程中的异步代码的
2.  Promise 是javascript异步编程的一种解决方案。 其他的一些异步解决方案为
    
     *  回调函数
     *  事件监听
     *  发布/订阅
3.  从语法上说，Promise是一个对象或者说函数，从它可以获取异步操作的消息

## 为什么需要Promise ##

我觉得除了上文说的那些原因，最主要是需要有一个对象格式来配合generator函数，个人觉得Promise和generator像是一对少了其中一个，另一个的意义也会变得不大

## Promise作用 ##

### 处理回调demo ###

*  回调比较多代码, 这种代码被称为回调地狱或者回调金字塔

const getDataCom = (str) => (dataS, cb) => { 
    	setTimeout(() => { 
    		if(typeof cb === 'function') { 
    			cb(str)
    		}
    	}, 10)
    }
    const getData1 = cb => { 
    	setTimeout(() => { 
    		cb('data1')
    	}, 10)
    }
    const getData2 = getDataCom('data2')
    const getData3 = getDataCom('data3')
    const getData4 = getDataCom('data4')
    const getData5 = getDataCom('data5')
    
    
    getData1(data1 => { 
      getData2(data1, data2 => { 
        getData3(data2, data3 => { 
          getData4(data3, data4 => { 
            getData5(data4, data5 => { 
              // 终于取到data5了
              console.log(data5)
            })
          })
        })
      })
    })

假设上面的任务，想要换一下执行顺序，代码修改起来，就比较麻烦了。如果内容复杂，阅读代码的时候跳来跳去，也让人头大。

*  如果用promise改写一下：

// 先把getData们都转成返回promise对象的函数
    // 然后
    const getData1 = () => new Promise((resolve) => { 
    	setTimeout(() => { 
    		resolve('data1')
    	}, 10)
    });
    const getData2 = (data) => new Promise((resolve) => { 
    	console.log(data)
    	setTimeout(() => { 
    		resolve('data2')
    	}, 10)
    });
    const getData3 = (data) => new Promise((resolve) => { 
    	console.log(data)
    	setTimeout(() => { 
    		resolve('data3')
    	}, 10)
    });
    const getData4 = (data) => new Promise((resolve) => { 
    	console.log(data)
    	setTimeout(() => { 
    		resolve('data4')
    	}, 10)
    });
    const getData5 = (data) => new Promise((resolve) => { 
    	console.log(data)
    	setTimeout(() => { 
    		resolve('data5')
    	}, 10)
    });
    
    getData1().then(getData2).then(getData3).then(getData4).then(getData5).then(data => { 
      // 取到最终data了
      console.log(data)
    })

### 结合generator函数和async/await控制异步的操作流程 ###

*  例子

function* longRunningTask(value1) { 
      try { 
        var value2 = yield step1(value1);
        var value3 = yield step2(value2);
        var value4 = yield step3(value3);
        var value5 = yield step4(value4);
        // Do something with value4
      } catch (e) { 
        // Handle any error from step1 through step4
      }
    }

## 基本使用和Api了解 ##

一般学习Promise看到的第一段代码是这样

### 构造函数 ###

### 语法 ###

new Promise(function(resolve, reject) { ...}
    /* executor */);
    /* 构造函数接受一个函数作为参数 调用构造函数得到实例promise的同时，作为参数的函数会立即执行 参数函数接受两个回调函数参数resolve和reject 在参数函数被执行的过程中，如果在其内部调用resolve，会将promise的状态变成fulfilled，或者调用reject，会将p的状态变成rejected */

### 方法 ###

1.  `Promise.all(iterable)`
2.  `Promise.race(iterable)`
3.  `Promise.reject(reason) 返回一个状态为失败的Promise对象`
4.  `Promise.resolve(value)`

### 原型 ###

1.  `Promise.prototype.then(onFulfilled, onRejected)`
2.  `Promise.prototype.catch(onRejected)`
3.  `Promise.prototype.finally(onFinally)`

## 参考链接 ##

1.  [JavaScript Promise：简介][JavaScript Promise]
2.  [Promise详解与实现（Promise/A+规范）][Promise_Promise_A]
3.  [Promise规范][Promise]
4.  [讲讲标准的 Promise 长啥样？][Promise 1]
5.  [Promise MDN][]
6.  [理解JavaScript Promise][JavaScript Promise 1]

[JavaScript Promise]: https://developers.google.com/web/fundamentals/primers/promises#whats-all-the-fuss-about
[Promise_Promise_A]: https://www.jianshu.com/p/459a856c476f
[Promise]: https://promisesaplus.com/
[Promise 1]: https://cloud.tencent.com/developer/news/70053
[Promise MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
[JavaScript Promise 1]: https://zhuanlan.zhihu.com/p/26523836