谈一谈 promise

谁借莪１个温暖的怀抱￠ 2022-11-06 07:54 191阅读 0赞

### 目录 ###

*   *   *  谈一谈 promise
         *  谈一谈 promise 的原型方法
         *  谈一谈 set
         *  谈一谈 map
         *  谈一谈 iterator 及手写

### 谈一谈 promise ###

**什么是 promise？**

一个异步编程的解决方案，将异步操作以同步的形式表达出来，避免回调地狱方式的书写。

**promise 对象：**

1.  `Promise` 是一个构造函数，需要实例化调用，得到一个实例化的 `promise` 对象。
2.  `Promise` 对象上有静态方法：`all、allSettled、any、race、reject、resolve`。
3.  `Promise` 原型对象上有：`catch、finally、then`。

**promise 的使用：**

1.  `promise` 接受一个函数作为参数,把异步代码写入这个函数中即可。
2.  `promise` 是处理异步代码的，但是本身是同步执行的。

**promise 的函数参数的两个参数：**

1.  `resolve`: 成功回调函数，当异步处理成功了，则直接调用成功回调函数。
2.  `reject`: 失败回调函数，当异步处理失败了，则直接调用失败回调函数。
3.  无论调用 `resolve` 还是 `reject`，都会把结果返回给 `promise` 对象。
4.  `resolve` 和 `reject` 方法调用的时候，可以传递参数，把成功的结果或失败的报错信息返回给 `promise` 对象接收。

**promise 实例化对象：**

1.  `[[PromiseState]]`：`promise` 状态：
    
    1.  `pending`: 初始化状态，异步代码正在执行中，或者开发人员没有调用 `resolve` 或 `reject`。
    2.  `solved/fulfilled`: 成功状态，只要在 `promise` 中调用了 `resolve` 即可返回成功状态。
2.  `[[PromiseResult]]`: `promise` 内部成功或失败的时候，调用 `resolve` 或 `reject` 方法，给的参数。

### 谈一谈 promise 的原型方法 ###

**promise.then():**

1.  可以捕获 `promise` 对象的成功状态，然后再执行下一步回调函数。
2.  `then` 方法接受一个函数作为参数。
3.  `then` 的返回值：
    
    1.  如果穿透了(`then` 中不书写回调函数)，则一定返回成功。
    2.  如果 `then` 内部出现错误信息，则返回失败 `promise`，值为错误信息。
    3.  其他情况只要看 `then` 回调函数 `return` 的 `promise` 对象即可。
4.  `then` 回调函数的参数 就是调用 `then` 的成功 `promise` 对象的 `promiseResult` 值。

**promise.catch():**

1.  可以捕获 `promise` 对象的失败状态，然后对错误处理。
2.  `catch` 的返回值：
    
    1.  如果穿透了(`catch`中不书写回调函数)，则一定返回失败。
    2.  如果 `catch` 内部出现错误信息，则返回失败 `promise`，值为错误信息。
    3.  其他情况只要看 `catch` 回调函数 `return` 的 `promise` 对象即可。
3.  `catch` 回调函数的参数 就是调用 `catch` 的失败 `promise` 对象的。 `promiseResult` 值。

**promise.finally():**

可以捕获成功或失败的 `promise` 状态，一般作为整个 `promise` 异步操作的最后异步。  
`promise.then` 和 `catch` 如果不书写任何参数，则会直接把调用 `then` 或 `catch` 的 `promise` 对象穿透过来并返回。

### 谈一谈 set ###

1.  `ES6` 提供了新的数据结构 `Set`。它类似于数组，但是成员的值都是唯一的，没有重复的值。
2.  `Set` 本身是一个构造函数，用来生成 Set 数据结构。
3.  `Set` 函数可以接受一个数组（或者具有 `iterable` 接口的其他数据结构）作为参数，用来初始化。
4.  可以用于字符串或数组去重。
5.  方法：
    
    1.  `size` 返回 `Set` 的长度。
    2.  `add` 添加某个值。
    3.  `delete` 删除某个值。
    4.  `has` 返回一个布尔值，表示该值是否为Set的成员。
    5.  `clear` 清除所有成员。
    6.  `forEach` 遍历。

### 谈一谈 map ###

1.  `JavaScript` 的对象（`Object`），传统上只能用字符串当作键。
2.  `ES6` 提供了 `Map` 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
3.  书写格式是 `new Map([[key,value],[key,value],[key,value]])`。
4.  方法：
    
    1.  `size` 长度。
    2.  `set` 设置。
    3.  `get` 获取。
    4.  `has` 判断。
    5.  `delete` 删除。
    6.  `forEach` 遍历。

### 谈一谈 iterator 及手写 ###

1.  在 `ES6` 中，只要一种数据结构具有了 `Symbol.iterator` 属性，那么就认为是可以迭代的。
2.  在 `ES6` 中，很多数据结构都部署了 `iterator` 接口 (`Array,set,Map,string`)。

function myIterator(arr) { 
        let index = 0;
        return { 
            next() { 
                if (index < arr.length) { 
                    return { 
                        value: arr[index++],
                        done: false
                    }
                }
    
                return { 
                    value: undefined,
                    done: true
                }
    
            }
        }
    }