# Promise

**Repository Path**: qiang-xiaoyue/promise

## Basic Information

- **Project Name**: Promise
- **Description**: 学习Promise
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-08
- **Last Updated**: 2023-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Promise

### Promise对象的三种状态：
* padding : 初始状态  </br>
* fulfilled ：成功状态  </br>
* rejected ：失败状态  </br>

> 状态一旦改变，就不会再变。</br>
  Promise对象，可以将异步操作以同步操作的流程表达出来，避免层层嵌套的回调函数。</br>
  Promise对象，一旦建立立即执行，无法中途取消。</br>

### 手写Promise

> 主体结构：

![输入图片说明](image.png)

#### 构造方法
> 代码：
```
//构造方法
    constructor(executor){
        //添加属性
        this.PromiseState = "pending";  //Promise状态
        this.PromiseResult = undefined;  //Promise结果
        let _this = this;  //this指向问题，
        this.callbacks = [];  //声明一个对象，异步回调用

        /* resolve函数
            箭头函数没有自己的this，它的this是继承而来的，
            默认指向定义它时的所处的对象（宿主对象），此处指父级作用域。
        * */
        let resolve = (data)=>{
            // console.log("this指向："+this);
            // 改变Promise状态和结果，
            //Promise状态一次改变后 不会再次改变
            if(this.PromiseState === "pending"){
                this.PromiseState = "fulfilled";
                this.PromiseResult = data;
            }
            //执行回调，异步操作的时候 回调then
            //当this.callback.onResolve存在的时候，说明异步执行了，需要回调then
            setTimeout(()=>{
                this.callbacks.forEach(item => {
                    item.onResolve(data);
                })
            });
        }

        // reject 函数   reject在调用时直接调用的，所以this指window，
        // 所以先定义_this=这里的this。
        function reject(data){
            // console.log("这里this指向："+_this);
            // 改变Promise状态和结果，
            //Promise状态一次改变后 不会再次改变
            if(_this.PromiseState === "pending"){
                _this.PromiseState = "rejected";
                _this.PromiseResult = data;
            }
            //执行回调，异步操作的时候 需要回调then
            //当this.callback.onReject存在的时候，说明异步执行了，需要回调then
            setTimeout(()=>{
                _this.callbacks.forEach( item => {
                    item.onReject(data);
                })
            });
        };

        try {
            //同步调用【执行器函数】
            executor(resolve, reject);
        }catch(e){
            //修改Promise对象状态为 失败
            reject(e);
        }

        //[执行器函数]是同步调用的
        executor(resolve,reject);
    }
```


#### then方法封装
> 代码：
```
//then方法封装
    then(onResolve, onReject){
        //判断参数
        if(typeof onResolve !== 'function'){
            // onResolve = value => {return value;}
            onResolve = value => value;
        }
        if(typeof onReject !== "function"){
            onReject = reason => {
                throw reason;
            }
        }

        return new Promise((resolve, reject)=>{
            //封装函数
            let callback = (type)=>{
                try {
                    //获取回调函数的执行结果
                    let result = type(this.PromiseResult);
                    //判断
                    if(result instanceof Promise){
                        //如果是 Promise 类型的对象
                        result.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        })
                    }else{
                        //结果对象状态为 【成功】
                        resolve(result);
                    }
                }catch(e){
                    reject(e);
                }
            };

            //调用回调函数
            if(this.PromiseState === "fulfilled"){
                //then为异步执行，添加一个定时器
                setTimeout(()=>{
                    callback(onResolve);
                });
            }
            if(this.PromiseState === "rejected"){
                //添加定时器，改为异步执行
                setTimeout(()=>{
                    callback(onReject);
                });
            }

            //判断 Promise 的状态 pending时
            if(this.PromiseState === "pending"){
                //保存回调函数
                this.callbacks.push({
                    onResolve: () => {
                        callback(onResolve);
                    },
                    onReject: () => {
                        callback(onReject);
                    }
                })
            }
        })
    }
```

#### catch方法
> 代码：
```
//catch方法
    catch(onRejected){
        return this.then(undefined,onRejected)
    }
```


#### resolve方法
> 代码：
```
//resolve方法
    static resolve(value){
        //返回Promise对象
        return new Promise((resolve, reject) => {
            //判断是一个Promise对象还是值
            if(value instanceof Promise){
                value.then(v => {
                    //设置状态 成功
                    resolve(v);
                }, r => {
                    //设置状态 失败
                    reject(r);
                });
            }else {
                resolve(value);
            }
        })
    }
```

#### reject方法
> 代码：
```
//reject方法
    static reject(reason){
        return new Promise((resolve, reject) => {
            reject(reason);
        }) ;
    }
```

#### all方法
> 代码：
```
//all方法
    static all(promises){
        //返回结果为Promise对象
        return new Promise((resolve, reject)=>{
            //声明变量
            let count = 0;
            let arr = [];
            //遍历
            for(let i=0; i<promises.length; i++){
                promises[i].then(v => {
                    //得知对象的状态是成功
                    //每个promise对象 都成功
                    count++;
                    //将当前的promise对象成功的结果，存入到数组中
                    arr[i] = v; //用下标的方式，不用push。是因为push可能会打乱顺序
                    //判断
                    if(count === promises.length){
                        //修改状态
                        resolve(arr);
                    }
                }, r =>{
                    reject(r);
                });
            }
        });
    }
```

#### race方法
> 代码：
```
//race方法
    static race(promises){
        return new Promise((resolve, reject)=>{
            for(let i=0; i<promises.length; i++){
                //第一个元素状态是什么，对象的状态与结果就是什么
                promises[i].then(v=>{
                    //直接修改对象的状态 【成功】
                    resolve(v);
                }, r=>{
                    //直接修改对象的状态【失败】
                    reject(r);
                });
            }
        });
    }
```


1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)