Promise 的使用

╰半夏微凉° 2022-09-06 10:14 271阅读 0赞

### 文章目录 ###

*  一、Promise 的理解和使用
 *   *  1.1 Promise 简介
     *  1.2 Promise 基本流程
     *  1.3 Promise 基本使用
 *  二、Promise API
 *  三、Promise 关键问题

# 一、Promise 的理解和使用 #

## 1.1 Promise 简介 ##

**① Promise 介绍**

*  `Promise`是一门新的技术(`ES6`规范)
 *  `Promise`是`JS`中进行异步编程的新解决方案
 *  从语法上来说: `Promise`是一个构造函数
 *  从功能上来说: `Promise`对象用来封装一个异步操作并可以获取其成功/  
    失败的结果值

注：`ES6`之前的异步编程方案是单纯使用回调函数，比如：

*  fs 文件操作：`require('fs').readFile('./index.html', (err,data)=>{})`
 *  AJAX：`$.get('/server', (data)=>{})`
 *  定时器：`setTimeout(()=>{}, 2000)`

**② Promise 的优点**

*  指定回调函数的方式更加灵活  
    旧的: 必须在启动异步任务前指定； `promise`: 启动异步任务 => 返回`promise`对象 => 给`promise`对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
 *  支持链式调用，可以解决回调地狱问题

> 回调地狱指的是回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件 ，不便于阅读和不便于异常处理，`promise`链式调用和**async/await**

## 1.2 Promise 基本流程 ##

![在这里插入图片描述][0803610c18a449ebbac8b139e98414ff.png]  
**【 Promise 状态】**

`Promise`状态改变有两种情况：pending变为resolved、pending变为rejected 。

**【Promise 对象】**  
![在这里插入图片描述][bdce6302525d48549a0d27d91f72a5a0.png]  
『PromiseState』（状态）：

*  `pending` 未决定的
 *  `resolved`/`fullfilled` 成功
 *  `rejected` 失败

『PromiseResult』（保存着异步任务执行的结果）：

*  `resolve`
 *  `reject`

## 1.3 Promise 基本使用 ##

**① 实现文件读取**

const fs = require('fs')
    
    const p = new Promise((resolve, reject) => { 
    	fs.readFile('../resource/content.txt', (err, data) => { 
    		if (err) { 
    			reject(err)	
    		} else { 
    			resolve(data)
    		}
    	})
    }).then(value => { 
    	console.log(value.toString())
    }, reason => { 
    	console.log("错误信息："+reason)
    })

**② 封装一个函数读取文件**

function myReadFile(path) { 
    	return new Promise((resolve, reject) => { 
    		require('fs').readFile(path, (err, data) => { 
    			if (err) { 
    				reject(err)
    			} else { 
    				resolve(data)
    			}
    		})
    	})
    }
    myReadFile('../resource/content.txt').then((value) => { 
    	console.log(value.toString())
    }, (reason) => { 
    	console.log(reason)
    })

**③ 使用util.promisify方法简化**

//引入util
    const util = require('util')
    //引入fs模块
    const fs = require("fs")
    let myReadFile = util.promisify(fs.readFile)
    myReadFile('../resource/content.txt').then(value => { 
    	console.log(value.toString())
    }, reason => { 
    	console.log(reason)
    })

# 二、Promise API #

**① Promise 构造函数 `Promise (excutor) {}`**

`executor 函数`: 执行器`(resolve, reject) => {}`（`executor`会在`Promise`内部立即同步调用，异步操作在执行器中执行）

*  `resolve`函数: 内部定义成功时我们调用的函数`value => {}`
 *  `reject`函数: 内部定义失败时我们调用的函数`reason => {}`

**② Promise.prototype.then 方法`(onResolved, onRejected) => {}`**

用于得到成功`value`的成功回调和用于得到失败`reason`的失败回调返回一个新的`promise`对象

*  `onResolved`函数: 成功的回调函数`(value) => {}`
 *  `onRejected`函数: 失败的回调函数`(reason) => {}`

**③ Promise.prototype.catch 方法`(onRejected) => {}`**

`then()`的语法糖，相当于`then(undefined, onRejected)`

*  `onRejected`函数: 失败的回调函数`(reason) => {}`

**④ Promise.resolve 方法`(value) => {}`**

返回一个成功/失败的`promise`对象

*  `value`: 成功的数据或`promise`对象

**⑤ Promise.reject 方法`(reason) => {}`**

返回一个失败的`promise`对象

*  `reason`: 失败的原因

**⑥ Promise.all 方法`(promises) => {}`**

说明: 返回一个新的`promise`，只有所有的`promise`都成功才成功，只要有一个失败了就直接失败

*  `promises`: 包含`n`个`promise`的数组

**⑦ Promise.race方法: (promises) => \{\}**

说明: 返回一个新的`promise`，第一个完成的`promise`的结果状态就是最终的结果状态

*  `promises`: 包含`n`个`promise`的数组

# 三、Promise 关键问题 #

**① 如何改变 promise 的状态?**

*  `resolve(value)`: 如果当前是`pending`就会变为`resolved`
 *  `reject(reason)`: 如果当前是`pending就会变为`rejected\`
 *  抛出异常: 如果当前是`pending`就会变为`rejected`

**② 一个promise指定多个成功/失败回调函数，都会调用吗?**

当`promise`改变为对应状态时都会调用

**③ 改变promise状态和指定回调函数谁先谁后?**

都有可能，正常情况下是先指定回调再改变状态，但也可以先改状态再指定回调

如何先改状态再指定回调?

*  在执行器中直接调用`resolve()`/`reject()`
 *  延迟更长时间才调用`then()`

什么时候才能得到数据?

*  如果先指定的回调，那当状态发生改变时看，回调函数就会调用，得到数据
 *  如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据

**④ promise.then() 返回的新 promise 的结果状态由什么决定?**

由`then()`指定的回调函数执行的结果决定

*  如果抛出异常，新`promise`变为`rejected`，`reason`为抛出的异常
 *  如果返回的是非`promise`的任意值，新`promise`变为`resolved`，`value`为返回的值
 *  如果返回的是另一个新`promise`，此`promise`的结果就会成为新`promise`的结果

**⑤ promise 如何串连多个操作任务?**

`promise`的`then()`返回一个新的`promise`，可以开成`then()`的链式调用，通过`then`的链式调用串连多个同步/异步任务

**⑥ promise 异常传透?**

当使用`promise`的`then`链式调用时，可以在最后指定失败的回调，前面任何操作出了异常，都会传到最后失败的回调中处理

**⑦中断 promise 链?**

当使用`promise`的`then`链式调用时，在中间中断，不再调用后面的回调函数

*  在回调函数中返回一个`pendding`状态的`promise`对象

[0803610c18a449ebbac8b139e98414ff.png]: /images/20220829/fc8a34b1e1fc4a21a4ee7c58a4abe9a9.png
[bdce6302525d48549a0d27d91f72a5a0.png]: /images/20220829/dc63caa53bab40fa9dcbda5ba57b74ff.png