本文带大家手写promise，和官方的promise保持一致可以互操作，关于promise的基础知识这里就不再过多赘述了，网上有很多资料，如果有不懂的大家可以上网查阅其它资料
[代码地址gitee](https://gitee.com/sql123z/practice-common/blob/master/src/MyPromise/index.js)



# 构造函数
```js
class MyPromise {

  constructor(executor) {
    // 实例化Promise时必须传入一个执行器函数，该函数接收两个参数 resolve和reject用来改变promise的状态
    executor(this.resolve.bind(this),this.reject.bind(this))
  }

  resolve () { 

  }

  reject () { 

  }
}
```

# 实现resolve和reject
```js
class MyPromise {
// 私有属性，防止外部修改该属性的值
  #PromiseState = PENDING;
  #PromiseResult = undefined;
  #onFulfilledCallbacks = []; // 保存成功时的回调函数
  #onRejectedCallbacks = []; // 保存失败时的回调函数
  
  constructor(executor) {
    // 实例化Promise时必须传入一个执行器函数，该函数接收两个参数 resolve和reject用来改变promise的状态
    executor(this.resolve.bind(this),this.reject.bind(this))
  }

  resolve (result) {
    if (this.#PromiseState !== PENDING) return;
    this.#PromiseState = FULFILLED;
    this.#PromiseResult = result;
    this.#onFulfilledCallbacks.forEach(callback => {
      callback(result)
    })

  }

  reject (reason) {
    if (this.#PromiseState !== PENDING) return;
    this.#PromiseState = REJECTED;
    this.#PromiseResult = reason;
    this.#onRejectedCallbacks.forEach(callback => {
      callback(reason)
    })
  }
}
```

# 实现then
```js
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';
class MyPromise {

  // 私有属性，防止外部修改该属性的值
  #PromiseState = PENDING;
  #PromiseResult = undefined;
  #onFulfilledCallbacks = []; // 保存成功时的回调函数
  #onRejectedCallbacks = []; // 保存失败时的回调函数
  constructor(executor) {
    try {
      // 实例化Promise时必须传入一个执行器函数，该函数接收两个参数 resolve和reject用来改变promise的状态
      executor(this.resolve.bind(this), this.reject.bind(this))
    } catch (error) {
      this.reject(error);
    }
  }

  resolve (result) {
    if (this.#PromiseState !== PENDING) return;
    this.#PromiseState = FULFILLED;
    this.#PromiseResult = result;
    this.#onFulfilledCallbacks.forEach(callback => {
      callback(result)
    })

  }

  reject (reason) {
    if (this.#PromiseState !== PENDING) return;
    this.#PromiseState = REJECTED;
    this.#PromiseResult = reason;
    this.#onRejectedCallbacks.forEach(callback => {
      callback(reason)
    })
  }

  // 链式调用的then方法
  // 该方法接收两个参数 onFulfilled 和 onRejected，它们都是可选的，分别表示当Promise状态变为fulfilled和rejected时的回调函数
  then (onFulfilled, onRejected) {
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.#PromiseState === FULFILLED) {
        runMicroTask(() => {
          try {
            if (typeof onFulfilled !== 'function') {
              resolve(this.#PromiseResult);
            } else {
              let x = onFulfilled(this.#PromiseResult);
              resolvePromise(promise2, x, resolve, reject);
            }
          } catch (e) {
            reject(e);
          }
        })
      } else if (this.#PromiseState === REJECTED) {
        runMicroTask(() => {
          try {
            if (typeof onRejected !== 'function') {
              reject(this.#PromiseResult);
            } else {
              let x = onRejected(this.#PromiseResult);
              resolvePromise(promise2, x, resolve, reject);
            }
          } catch (e) {
            reject(e);
          }
        })
      } else {
        this.#onFulfilledCallbacks.push(() => {
          runMicroTask(() => {
            try {
              if (typeof onFulfilled !== 'function') {
                resolve(this.#PromiseResult);
              } else {
                let x = onFulfilled(this.#PromiseResult);
                resolvePromise(promise2, x, resolve, reject);
              }
            } catch (e) {
              reject(e);
            }
          })
        });
        this.#onRejectedCallbacks.push(() => {
          runMicroTask(() => {
            try {
              if (typeof onRejected !== 'function') {
                reject(this.#PromiseResult);
              } else {
                let x = onRejected(this.#PromiseResult);
                resolvePromise(promise2, x, resolve, reject);
              }
            } catch (e) {
              reject(e);
            }
          })
        });
      }
    })
    return promise2
  }






}

runMicroTask = (task) => {
  //queueMicrotask(task);
  if (typeof process !== 'undefined' && typeof process.nextTick === 'function') {
    // node环境
    return process.nextTick(task);
  } else if (typeof MutationObserver === "function") {
    const ob = new MutationObserver(task);
    const textNode = document.createTextNode('1')
    ob.observe(textNode, {
      characterData: true
    })
    textNode.data = '2'
  } else {
    setTimeout(task, 0);
  }
}


resolvePromise = (promise2, x, resolve, reject) => {
  // 2.3.1规范 如果 promise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 promise
  if (x === promise2) {
    throw new TypeError('Chaining cycle detected for promise');
  }

  if (x instanceof MyPromise) {
    /**
        * 2.3.2 如果 x 为 Promise ，则使 promise2 接受 x 的状态
        *       也就是继续执行x，如果执行的时候拿到一个y，还要继续解析y
        */
    x.then(y => {
      resolvePromise(promise2, y, resolve, reject);
    }, reject)
  } else if (x !== null && ((typeof x === 'object' || (typeof x === 'function')))) {
    // 2.3.3 如果 x 为对象或函数
    try {
      // 2.3.3.1 把 x.then 赋值给 then
      var then = x.then;
    } catch (e) {
      // 2.3.3.2 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
      return reject(e);
    }

    /**
         * 2.3.3.3 
         * 如果 then 是函数，将 x 作为函数的作用域 this 调用之。
         * 传递两个回调函数作为参数，
         * 第一个参数叫做 `resolvePromise` ，第二个参数叫做 `rejectPromise`
         */
    if (typeof then === 'function') {
      // 2.3.3.3.3 如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用
      let called = false; // 避免多次调用
      try {
        then.call(x,
          // 2.3.3.3.1 如果 resolvePromise 以值 y 为参数被调用，则运行 [[Resolve]](promise, y)
          y => {
            if (called) return;
            called = true;
            resolvePromise(promise2, y, resolve, reject);
          },
          // 2.3.3.3.2 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
          r => {
            if (called) return;
            called = true;
            reject(r);
          }
        )
      } catch (error) {
        /**
                 * 2.3.3.3.4 如果调用 then 方法抛出了异常 e
                 * 2.3.3.3.4.1 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之
                 */
        if (called) return;
        called = true;
        // 2.3.3.3.4.2 否则以 e 为据因拒绝 promise
        reject(error);
      }
    } else {
      // 2.3.3.4 如果 then 不是函数，以 x 为参数执行 promise
      resolve(x);
    }

  } else {
    // 2.3.4 如果 x 不为对象或者函数，以 x 为参数执行 promise
    return resolve(x);
  }
};

isPromiseLike = (value) => {
  return value && typeof value.then === 'function';
}

```

# promises-aplus-tests测试用例

![image.png](/static/img/175394f65b1261f43fcfa308c2330c4d.image.webp)

手写Promise

在业务开发中需要绘制数据流向图，由于echarts关系图的限制以及需求的特殊要求，转而使用antv/g6实现，本文以代码的方式实现数据流向需求以及节点分组,版本"@antv/g6": "^4.8.24",


本文主要列出关键性的代码，并非全部代码

静态数据如下
```ts
getCenterFlowG6ApiV2(data = {}) {
    return new Promise((resolve) => {
      let nodes: any = []
      for (let i = 1; i <= 14; i++) {
        let node: any = { id: "node-" + i, label: "node-" + i }
        if (i % 3 === 0) {
          node.class = "c0"
        } else if (i % 3 === 1) {
          node.class = "c1"
        } else if (i % 3 === 2) {
          node.class = "c2"
        }
        nodes.push(node)
      }

      const res = {
        "resultStat": "0",
        "failCode": null,
        "mess": "获取流向成功",
        "callBack": null,
        "data": {
          nodes: [
            {
              id: "4",
              label: "业务数据库A",
              comboId:"group0",
              imgType:"14",
              "pointNodeDetail": {
                "nodeName": "武汉关",
                "nodeTypeName": "应用安全域",
                "areaName": "武汉关",
                "areaIpScope": "160.1.1.1-255.255.255.255",
                "areaBelong": "tanzhi",
                "areaType": "办公网接入域"
              },
            }, {
              id: "8",
              label: "业务数据库B",
              comboId:"group1",
              imgType:"10"
            },{
              id: "10",
              label: "主机166.10.1.1",
              comboId:"group2"
            },{
              id: "12",
              label: "主机161.19.1.4",
              comboId:"group4"
            }, {
              id: "14",
              label: "业务数据库B",
              comboId:"group3"
            }
          ],
          edges: [
            {
              eid: "4-8",
              source: "4",
              target: "8",
            },{
              eid: "8-4",
              source: "8",
              target: "4",
            },{
              eid: "10-4",
              source: "10",
              target: "4",
            },{
              eid: "10-8",
              source: "10",
              target: "8",
            },{
              eid: "12-8",
              source: "12",
              target: "8",
              style:{
                stroke: 'red', // 线的颜色
              }
            },{
              eid: "4-14",
              source: "4",
              target: "14",
            }
          ],
          combos: [
            {
              id:'group0',
              label:'信息中心',
              collapsed: true,// 初始时，收起，不展示内部节点
              style:{
                fill: "r(0.5,0.5,0.9) 0.6:#f8fcff 1:#3b97f1",
                opacity: 0.2
              }
            },
            {
              id:'group1',
              label:'数据分析中心',
              parentId:'group0',
              collapsed: true,
              style:{
                fill:"#FCCBAE"
              }
            },
            {
              id:'group2',
              label:'数据采集',
              collapsed: true,
              style:{
                fill:"#ECF7CF"
              }
            },
            {
              id:'group3',
              label:'业务办公区',
              parentId:'group0',
              collapsed: true,
              style:{
                fill:"#CECFD1"
              }
            },
            {
              id:'group4',
              label:'某地海关',
              collapsed: true,
              style:{
                fill:"#D1E9FF"
              }
            }
          ]
        },
        "redirectURL": null,
        "total": null
      }
      resolve(res)
    })
  }

```

```html
<div class="echart-box">
                    <div class="chart1" id="charts1" *ngIf="chartData.data != null && !pageLoading" ></div>
                </div>  
```

数据加载如下
```ts

import G6 from "@antv/g6"

import equipment from "../../../../assets/equipment.png"
import equipmentE from "../../../../assets/equipmentE.png"
import equipmentY from "../../../../assets/equipmentY.png"
import application from "../../../../assets/application.png"
import assetsE from "../../../../assets/assetsE.png"
import assetsY from "../../../../assets/assetsY.png"
import assets from "../../../../assets/assets.png"
import domain from "../../../../assets/domain.png"
import domainE from "../../../../assets/domainE.png"
import domainY from "../../../../assets/domainY.png"
import warning from "../../../../assets/warning.png"
import warningY from "../../../../assets/warningY.png"

import clusterAsset from "../../../../assets/clusterAsset.png"
import clusterAssetY from "../../../../assets/clusterAssetY.png"
import clusterAssetR from "../../../../assets/clusterAssetR.png"
import belongCenterY from "../../../../assets/belongCenterY.png"
import belongCenter from "../../../../assets/belongCenter.png"
import belongCenterR from "../../../../assets/belongCenterR.png"
import netDomain from "../../../../assets/netDomain.png"
import netDomainR from "../../../../assets/netDomainR.png"
import netDomainY from "../../../../assets/netDomainY.png"
import groupIcon from "../../../../assets/chart/img/g6/群组_02.png";

/**
     * 加载流向图
     */
    getDataFlow() {
        this.pageLoading = true
        this.apiService.getCenterFlowG6ApiV2(removeNullProperty({
            ...this.q
        })).then((res: resType) => {
            console.log(res);
            if (res.resultStat === "0") {
                this.chartData.data = this.transformData(res.data)
                console.log(this.chartData.data);

                setTimeout(() => {
                    this.initG6DataFlow(this.chartData.data)
                }, 300);

            }
            this.pageLoading = false
        }).catch(err => {
            this.pageLoading = false
        })
    }
    
    initG6DataFlow(data) {
        let rectWidth = 800
        let rectHeight = 600
        const eContainer = document.getElementById("charts1")
        if (eContainer) {
            if (data.nodes.length < 100) {
                eContainer.style.height = '100%'  // 600px
                eContainer.style.minHeight = '600px'  // 600px
                eContainer.style.width = '100%'  // 800px
            } else {
                eContainer.style.height = '1080px'
                eContainer.style.width = '1920px'
            }

            const rectObject = eContainer.getBoundingClientRect()
            rectWidth = rectObject.right - rectObject.left
            rectHeight = rectObject.bottom - rectObject.top;
            console.log(rectObject);
            console.log(rectWidth, rectHeight);
        }

        const graph = new G6.Graph({
            container: 'charts1', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
            width: rectWidth - 10, // Number，必须，图的宽度
            height: rectHeight - 10, // Number，必须，图的高度
            fitView: false, // 将图适配到画布
            fitViewPadding: 50, // 画布四周留白宽度
            // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
            groupByTypes: false,
            fitCenter: true,
            linkCenter: false,
            //autoPaint: true,
            
            layout: {
                type: 'comboCombined',
                spacing: 20,
                comboPadding: 5
            },
            modes: {
                // 允许拖拽画布、放缩画布、拖拽节点,
                default: [
                    'drag-canvas',
                    'zoom-canvas',
                    {
                        type: 'drag-node',
                        onlyChangeComboSize: true,
                    },
                    {
                        type: "drag-combo",
                        enableDelegate: false,
                        onlyChangeComboSize: true,
                    },
                    {
                        type: 'collapse-expand-combo',
                        trigger: 'click',
                        relayout: false, // 收缩展开后，不重新布局
                    },
                    {
                        type: 'tooltip', // 提示框
                        formatText(model) {
                            // 提示框文本内容
                            const text = 'label: ' + model.label + '<br/> class: ' + model.class;
                            return text;
                        },
                        shouldUpdate: e => {
                            return true;
                        }
                    },
                    {
                        type: 'edge-tooltip', // 边提示框
                        formatText(model) {
                            // 边提示框文本内容
                            const text =
                                'source: ' +
                                model.source +
                                '<br/> target: ' +
                                model.target +
                                '<br/> weight: ' +
                                (model.weight || "");
                            return text;
                        },
                        shouldUpdate: e => {
                            return true;
                        }
                    }
                ],

            },
            defaultNode: {// 默认状态下的节点配置
                size: 30,
                // 节点样式配置
                style: {
                    fill: 'steelblue', // 节点填充色
                    stroke: '#666', // 节点描边色
                    lineWidth: 2, // 节点描边粗细
                },
                // 节点上的标签文本配置
                labelCfg: {
                    // 节点上的标签文本样式配置
                    style: {
                        fill: '#333', // 节点标签文字颜色
                        stroke: '#fff',
                    },
                    position:"bottom"
                },
            },
            defaultEdge: {// 默认状态下的边配置
                style: {
                    //opacity: 0.6, // 边透明度
                    lineWidth: 4, // 线宽
                    stroke: '#D6ECF3', // 线的颜色
                    //endArrow: true,// 默认箭头
                    endArrow: { // 自定义终点箭头
                        path: G6.Arrow.vee(5, 10, 10), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
                        d: 10
                    }
                },
                // 边上的标签文本配置
                labelCfg: {
                    autoRotate: true, // 边上的标签文本根据边的方向旋转
                    refY: 10,
                },
            },
            defaultCombo: {
                collapsed: true,
                padding:5,
                labelCfg:{
                    "style": {
                        "fontSize": 12,
                        "fill": "r(0.5,0.5,0.1)  0:#ffffff 1:#555555",
                        "opacity": 1,
                        "stroke": "#fff",
                        "lineWidth": 1,
                        "fontFamily": "微软雅黑",
                        "text": "信息中心"
                    },
                    "position": "top"
                },
                collapsedSubstituteIcon: { // 群组收起时的图标
                    show: true,
                    img: groupIcon,
                    height: 30,
                    width: 30,
                  },
            },
            // 节点不同状态下的样式集合
            nodeStateStyles: {
                // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
                hover: {
                    fill: 'lightsteelblue',
                },
                // 鼠标点击节点，即 click 状态为 true 时的样式
                click: {
                    stroke: '#000',
                    lineWidth: 3,
                },
            },
            // 边不同状态下的样式集合
            edgeStateStyles: {
                // 鼠标点击边，即 click 状态为 true 时的样式
                click: {
                    stroke: 'steelblue',
                },
            },
        });

        if (this.chartData.instance) {
            this.chartData.instance.destroy()
        }
        this.chartData.instance = graph
        graph.data(data); // 读取 Step 2 中的数据源到图上
        graph.render(); // 渲染图
        graph.get('canvas').set('localRefresh', false)
        // 监听鼠标进入节点
        graph.on('node:mouseenter', (e) => {
            const nodeItem = e.item;
            // 设置目标节点的 hover 状态 为 true
            graph.setItemState(nodeItem, 'hover', true);
        });
        // 监听鼠标离开节点
        graph.on('node:mouseleave', (e) => {
            const nodeItem = e.item;
            // 设置目标节点的 hover 状态 false
            graph.setItemState(nodeItem, 'hover', false);
        });
        // 监听鼠标点击节点
        graph.on('node:click', (e) => {
            console.log(e);
            this.pointNodeDetail = e.item._cfg.model.pointNodeDetail
            // 先将所有当前有 click 状态的节点的 click 状态置为 false
            const clickNodes = graph.findAllByState('node', 'click');
            clickNodes.forEach((cn) => {
                graph.setItemState(cn, 'click', false);
            });
            const nodeItem = e.item;
            // 设置目标节点的 click 状态 为 true
            graph.setItemState(nodeItem, 'click', true);
        });
        // 监听鼠标点击节点
        graph.on('edge:click', (e) => {
            // 先将所有当前有 click 状态的边的 click 状态置为 false
            const clickEdges = graph.findAllByState('edge', 'click');
            clickEdges.forEach((ce) => {
                graph.setItemState(ce, 'click', false);
            });
            const edgeItem = e.item;
            // 设置目标边的 click 状态 为 true
            graph.setItemState(edgeItem, 'click', true);
        });
    }
    
     /**
     * 对接口数据进行加工
     */
    transformData(data) {
        for (let i = 0; i < data.nodes.length; i++) {
            let node = data.nodes[i]
            console.log(node);
            if (!node.style) {
                node.style = {}
            }

            switch (
            node.class // 根据节点数据中的 class 属性配置图形
            ) {
                case 'c0': {
                    node.type = 'circle'; // class = 'c0' 时节点图形为 circle
                    break;
                }
                case 'c1': {
                    debugger
                    node.type = 'rect'; // class = 'c1' 时节点图形为 rect
                    node.size = [35, 20]; // class = 'c1' 时节点大小
                    break;
                }
                case 'c2': {
                    node.type = 'ellipse'; // class = 'c2' 时节点图形为 ellipse
                    node.size = [35, 20]; // class = 'c2' 时节点大小
                    break;
                }
            }
            if(node.imgType){
                this.transNodeImg(node)
            }


        }

        return data
    }
    
    /**
     * 根据类型设置image图标
     * @param node 
     */
    transNodeImg(node) {
        node.type = 'image'; 
        node.size = 30
        switch (
        node.imgType // 根据节点数据中的 class 属性配置图形
        ) {
            case '1': {
                node.img = domain
                break;
            }
            case '2': {
                node.img = equipment
                break;
            }
            case '3': {
                node.img = assets
                break;
            }
            case '4': {
                node.img = application
                break;
            }
            case '5': {
                node.img = domainY
                break;
            }
            case '6': {
                node.img = equipmentY
                break;
            }
            case '7': {
                node.img = assetsY
                break;
            }
            case '8': {
                node.img = warningY
                break;
            }
            case '9': {
                node.img = domainE
                break;
            }
            case '10': {
                node.img = equipmentE
                break;
            }
            case '11': {
                node.img = assetsE
                break;
            }
            case '12': {
                node.img = warning
                break;
            }
            case '13': {
                node.img = clusterAsset
                break;
            }
            case '14': {
                node.img = belongCenter
                break;
            }
            case '15': {
                node.img = belongCenter
                break;
            }
            case '16': {
                node.img = netDomain
                break;
            }
            case '17': {
                node.img = clusterAssetY
                break;
            }
            case '18': {
                node.img = belongCenterY
                break;
            }
            case '19': {
                node.img = belongCenterY
                break;
            }
            case '20': {
                node.img = netDomainY
                break;
            }
            case '21': {
                node.img = clusterAssetR
                break;
            }
            case '22': {
                node.img = belongCenterR
                break;
            }
            case '23': {
                node.img = belongCenterR
                break;
            }
            case '24': {
                node.img = netDomainR
                break;
            }

        }
    }
```

页面效果如下:

![image.png](https://blog.qianxun.shop/static/img/ec9122374f06b7db1862f03bd4aa44e7.8.webp)


![image.png](https://blog.qianxun.shop/static/img/e3649250734885d836491b62920b6be8.7.webp)


![image.png](https://blog.qianxun.shop/static/img/93f16789dde47afccd058c3794888bb5.6.webp)

antv/g6绘制数据流向图

使用Angular框架开发工作中，实现文件下载业务时，我们可以使用ANgular自带的HttpClient。下面我们就封装一下HttpClient实现文件下载，当接口返回文件流正常下载，返回json信息时也能返回，让使用者自行处理。



# 下载
HttpRequest.ts
```
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpUrlEncodingCodec } from "@angular/common/http";
import { Injectable, Component } from "@angular/core";
import { throwError } from "rxjs";
import { catchError, map } from "rxjs/operators";

import { environment } from "src/environments/environment";


@Injectable({
    providedIn: 'root'
})
export class HttpRequest{ 
    public downFileBlobPromise(url: string, data = {}) {
        let options: any = {}
        let header: { [name: string]: string } = {}
        header['Content-Type'] = 'application/x-www-form-urlencoded'
        header['Accept'] = '*/*'
        options['headers'] = header
        options['responseType'] = "blob"
        options['observe'] = "response"
        let obj = Object.assign({}, options, { params: data })
        return new Promise((resolve, reject) => {
            this.http.get(url, obj).subscribe(async res => {
                const txt = await this.convertRes2Blob(res)
                resolve(txt)
            }, err => {
                reject(err)
            })
        })
    }

    private async convertRes2Blob(response: any) {

        if (!response.headers.has("content-disposition")) {
            const blob = new Blob([response.body], { type: 'application/octet-stream' })
            const resultJson = await this.readBlob(blob)
            return resultJson
        }
        const fileName = this.getFileName(response)
        const blob = new Blob([response.body], { type: 'application/octet-stream' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(blob, fileName)
            return null
        } else {
            const blobUrl = window.URL.createObjectURL(blob)
            const tempLink = document.createElement('a')
            tempLink.style.display = 'none'
            tempLink.href = blobUrl
            tempLink.setAttribute('download', fileName)

            document.body.appendChild(tempLink)
            tempLink.click()
            document.body.removeChild(tempLink)
            window.URL.revokeObjectURL(blobUrl)
            return null
        }
    }

    private getFileName(response: any) {
        const encode = response.headers.get('content-type')?.match(/charset=(.*)/) ? response.headers.get('content-type').match(/charset=(.*)/)[1] : null
        let fileName: string = response.headers.get('content-disposition').match(/filename=(.*)/)[1].replaceAll("\"", "")
        if (encode && encode == 'ISO8859-1') {
            const fn = escape(fileName)
            fileName = decodeURI(escape(fileName)).replace(new RegExp("%3A", "gm"), ":")
        } else {
            fileName = decodeURI(fileName)
        }
        return fileName

    }

    private readBlob(blob:Blob){
        const f = new FileReader()
        f.readAsText(blob, "UTF-8")
        return new Promise((resolve,reject) => {
            f.onload = (evt: any) => {              
                const re = evt.target.result                
                const result = JSON.parse(re)
                resolve(result)
            }

            f.onerror = (evt:any) => {
                reject(evt)
            }
        })
        
    }
}

```

使用
```

constructor(
    private router: Router,
    private service: AccountIdentifyService,
    private confirmationService: ConfirmationService,
    private toast: Toast,
    private req: HttpRequest,
  ) { }
  
 export() {
    this.exportLoading = true
    this.req.downFileBlobPromise(`koa2/download/2.txt`, param).then((res:any) => {
      this.exportLoading = false
      if(res){
        this.toast.error(res.mess)
      }else{
        this.toast.success("下载成功")
      }
      
    }).catch(err => {
      this.exportLoading = false
      this.toast.showError("下载异常")
    })
  }
```

后端文件下载接口示例,使用koa2写的demo
```
/** 文件下载 */
router.get("/download/:filename",async function(ctx,next){
  const filename = ctx.params.filename;

  if(filename != "1.txt"){
    setTimeout(() => {
      ctx.body = { 
        resultStat: "1",
        mess:"文件不存在",
      };
      return 
    }, 5000);
    
  }

  //request里面切出标识符字符串
  let requestUrl = ctx.request.originalUrl;
  //获取资源文件的绝对路径
  let filePath = path.resolve(__dirname + "/uploads/" + decodeURI(filename));
  console.log(filePath);
  let resHred = readFile(ctx.headers.range, filePath);
  ctx.status = resHred.code
  ctx.set(resHred.head);
  ctx.set('Content-Disposition', `attachment; filename=${encodeURIComponent(filename)}`);
  ctx.set('Content-Type', 'application/octet-stream');
  let stream = fs.createReadStream(filePath, resHred.code == 200 ? {} : { start: resHred.start, end: resHred.end });
  stream.pipe(ctx.res);
  // //也可使用这种方式。
  // stream.on('data', e => ctx.res.write(e));
  // // 接收完毕
  // stream.on('end', e => ctx.res.end());
  ctx.respond = false;
  return
})

```

# 下载进度监控
进一步改善我们封装类实现文件下载进度监控
```ts
import { HttpClient, HttpEvent, HttpEventType } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { filter, map } from "rxjs/operators";

@Injectable({
    providedIn: 'root'
})
export class FileHttpRequest {

    constructor(private http: HttpClient) {

    }

    download(url: string, params: any) {
        let options: any = {}
        let header: { [name: string]: string } = {}
        header['Content-Type'] = 'application/x-www-form-urlencoded'
        header['Accept'] = '*/*'
        options['headers'] = header
        options['responseType'] = "arraybuffer"
        options['observe'] = "events"
        options["reportProgress"] = true

        options = Object.assign(options, { params })
        console.log(options);

        return new Promise((resolve, reject) => {
            this.http.get(url, options).pipe(
                map(event => this.getEventMessage(event)),
                filter(f => f != null)
            ).subscribe(async res => {
                const txt = await this.getFileFromStream(res)
                resolve(txt)
            }, err => {
                console.log(err);
                reject(err)

            })
        })

    }

    private getEventMessage(event: any): ArrayBuffer {
        console.log(event);

        switch (event.type) {

            case HttpEventType.DownloadProgress:
                // 计算出下载进度
                const percentDone = Math.round(100 * event.loaded / event.total);
                console.log(event, percentDone);
                return null;

            case HttpEventType.Response:
                return event;

            default:
                return null;
        }
    }

    private getFileName(response: any) {
        debugger
        const encode = response.headers.get('content-type')?.match(/charset=(.*)/) ? response.headers.get('content-type').match(/charset=(.*)/)[1] : null
        let fileName: string = response.headers.get('content-disposition').match(/filename=(.*)/)[1].replaceAll("\"", "")
        if (encode && encode == 'ISO8859-1') {
            const fn = escape(fileName)
            fileName = decodeURI(escape(fileName)).replace(new RegExp("%3A", "gm"), ":")
        } else {
            fileName = decodeURI(fileName)
        }
        return fileName

    }

    private readBlob(blob:Blob){
        const f = new FileReader()
        f.readAsText(blob, "UTF-8")
        return new Promise((resolve,reject) => {
            f.onload = (evt: any) => {              
                const re = evt.target.result                
                const result = JSON.parse(re)
                resolve(result)
            }

            f.onerror = (evt:any) => {
                reject(evt)
            }
        })
        
    }

    private async getFileFromStream(response: any){
        if (!response.headers.has("content-disposition")) {
            const blob = new Blob([response.body], { type: 'application/octet-stream' })
            const resultJson = await this.readBlob(blob)
            return resultJson
        }
        const fileName = this.getFileName(response)
        const blob = new Blob([response.body], { type: 'application/octet-stream' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(blob, fileName)
            return null
        } else {
            const blobUrl = window.URL.createObjectURL(blob)
            const tempLink = document.createElement('a')
            tempLink.style.display = 'none'
            tempLink.href = blobUrl
            tempLink.setAttribute('download', fileName)

            document.body.appendChild(tempLink)
            tempLink.click()
            document.body.removeChild(tempLink)
            window.URL.revokeObjectURL(blobUrl)
            return null
        }
    }
}

```

Angular封装HttpClient文件下载

使用Koa2实现服务端的文件上传下载



```js
const Koa = require("koa")
const router = require("koa-router")();
const cors = require("koa2-cors")
const fs = require('fs');
const path = require('path');
const {koaBody} = require('koa-body');
console.log(koaBody);
const {saveFile,getFileStream,readFile} = require("./utils/file")

const app = new Koa()


/** 文件上传 */
router.post("/upload",function(ctx,next){
  const file = ctx.request.files.file;
  const uniqueFilename = saveFile(file);
  ctx.body = { filename: uniqueFileName };
})

/** 文件下载 */
router.get("/download/:filename",async function(ctx,next){

  const filename = ctx.params.filename;
  //request里面切出标识符字符串
  let requestUrl = ctx.request.originalUrl;
  //获取资源文件的绝对路径
  let filePath = path.resolve(__dirname + "/uploads/" + decodeURI(filename));
  let resHred = readFile(ctx.headers.range, filePath);
  ctx.status = resHred.code
  ctx.set(resHred.head);
  ctx.set('Content-Disposition', `attachment; filename=${encodeURIComponent(filename)}`);
  ctx.set('Content-Type', 'application/octet-stream');
  let stream = fs.createReadStream(filePath, resHred.code == 200 ? {} : { start: resHred.start, end: resHred.end });
  stream.pipe(ctx.res);
  // //也可使用这种方式。
  // stream.on('data', e => ctx.res.write(e));
  // // 接收完毕
  // stream.on('end', e => ctx.res.end());
  ctx.respond = false;
  return
})
router.post("/index",function(ctx,next){
    ctx.body = {
        data:"token....",
        message:"获取token成功"
    }
})
// app.use(async (ctx) => {
//     ctx.body = "token....."
// })
// app.use(
//     cors({
//         origin: function(ctx){
//             return "*"  //解决跨域
//         },
//         maxAge:5,
//         credentials:true,//是否携带cookie
//         allowMethods:["GET","POST","PUT","DELETE"]
//     })
// )

// koa-body 中间件来解析包含文件的 multipart/form-data 表单数据
app.use(koaBody({ multipart: true }));
app.use(router.routes())
//app.use(router.allowedMethods())
app.listen(3000)
```

关于文件操作的工具函数file.js

```js
const fs = require('fs');
const path = require('path');

function saveFile(file) {
    const reader = fs.createReadStream(file.path);
    const fileExtension = path.extname(file.name);
    const uniqueFileName = `${Date.now()}${fileExtension}`;
    const writer = fs.createWriteStream(path.join(__dirname, 'uploads', uniqueFileName));
    reader.pipe(writer);
    return uniqueFileName;
}

function getFileStream(filename) {
    return fs.createReadStream(path.join(__dirname, '../uploads', filename));
}



  /**
 * [读文件]
 * @param  {String} range        [数据起始位]
 * @param  {String} filePath     [文件路径]
 * @param  {Number} chunkSize    [每次请求碎片大小 （900kb 左右）]
 */
function readFile(range, filePath, chunkSize = 499999 * 2) {
    //mime类型
    const mime = {
        "css": "text/css",
        "gif": "image/gif",
        "html": "text/html",
        "ico": "image/x-icon",
        "jpeg": "image/jpeg",
        "jpg": "image/jpeg",
        "js": "text/javascript",
        "json": "application/json",
        "pdf": "application/pdf",
        "png": "image/png",
        "svg": "image/svg+xml",
        "swf": "application/x-shockwave-flash",
        "tiff": "image/tiff",
        "txt": "text/plain",
        "mp3": "audio/mp3",
        "wav": "audio/x-wav",
        "wma": "audio/x-ms-wma",
        "wmv": "video/x-ms-wmv",
        "xml": "text/xml",
        "mp4": "video/mp4"
    };
    // 获取后缀名
    let ext = path.extname(filePath);
    ext = ext ? ext.slice(1) : 'unknown';
    //未知的类型一律用"text/plain"类型
    let contentType = mime[ext.toLowerCase()];
 
    //建立流对象，读文件
    let stat = fs.statSync(filePath)
    let fileSize = stat.size;
    let head = {
        code: 200,
        head: {
            'Content-Length': fileSize,
            'content-type': contentType,
        }
 
    };
    console.log("range: ",range);
    if (range) {
        // 大文件分片
        let parts = range.replace(/bytes=/, "").split("-");
        let start = parseInt(parts[0], 10);
        let end = parts[1] ? parseInt(parts[1], 10) : start + chunkSize;
        end = end > fileSize - 1 ? fileSize - 1 : end;
        chunkSize = (end - start) + 1;
        head = {
            code: 206,
            filePath,
            start,
            end,
            head: {
                'Content-Range': `bytes ${start}-${end}/${fileSize}`,
                'content-type': contentType,
                'Content-Length': chunkSize,
                'Accept-Ranges': 'bytes'
            }
        }
 
    }
    return head;
}


module.exports = {
    saveFile,
    getFileStream,
    readFile
}

```

koa2 文件上传下载

那些你忽略的typescript小技巧



# 运算符
## 空值合并运算符 ??

?? 与 || 功能很相似，不同的是 ??在左侧表达式为 `null` 或 `undefined` 时，才会右侧表达式。

```
const num = a ?? 10;

// 上面的写法等价于下面的写法

const num2 = ( a !== null && a !== void 0) ? a : 10;

```
在这里科普一下，`void 0` 会返回 `undefined`,那这里为什么不直接写`undefined`呢，是因为undefined是全局作用域中的一个变量，undefined的最初值就是原始数据类型undefined。
ES5之后的标准中，规定了全局变量下的undefined值为只读，不可改写的，但是局部变量中依然可以对之进行改写。
所以使用void 0来代替undefined就比较稳妥，防止出错。

## 非空断言运算符 !

这个运算符可以用在变量名或者函数名之后，用来强调对应的元素是非 null|undefined 的

```js
function clickHandle(){
    this.domRef!.open()  // ! 告诉编译器 变量不为null 或 undefinded
}
```

## 可选链运算符 ?.

相比上面!作用于编译阶段的非空判断，?.这个是开发者最需要的运行时(当然编译时也有效)的非空判断。

obj?.prop obj?.[index] func?.(args)

?.用来判断左侧的表达式是否是 null | undefined，如果是则会停止表达式运行，可以减少我们大量的&&运算。
比如我们写出a?.b时，编译器会自动生成如下代码

a === null || a === void 0 ? void 0 : a.b;

# 操作符

## 键值获取 keyof

keyof 可以获取一个类型所有键值，返回一个联合类型

```ts
type Person = {
  name: string;
  age: number;
}
type PersonKey = keyof Person; 
// PersonKey得到的类型为 'name' | 'age'

```
keyof 的一个典型用途是限制访问对象的 key 合法化，因为 any 做索引是不被接受的

```ts
function getValue (p: Person, k: keyof Person) {
  return p[k];  // 如果k不如此定义，则无法以p[k]的代码格式通过编译
}

```

## 实例类型获取 typeof

typeof 是获取一个对象/实例的类型

```ts
const me: Person = { name: 'gzx', age: 16 };
type P = typeof me;  // { name: string, age: number | undefined }
const you: typeof me = { name: 'mabaoguo', age: 69 }  // 可以通过编译

```

## 遍历属性 in
 
 in 只能用在类型的定义中，可以对枚举类型进行遍历

```ts
// 这个类型可以将任何类型的键值转化成number类型
type TypeToNumber<T> = {
  [key in keyof T]: number
}

```
keyof返回泛型 T 的所有键枚举类型，key是自定义的任何变量名，中间用in链接，外围用[]包裹起来(这个是固定搭配)，冒号右侧number将所有的key定义为number类型。

于是可以这样使用了：

const obj: TypeToNumber<Person> = { name: 10, age: 10 }
    
总结起来 in 的语法格式如下：
    
```
[ 自定义变量名 in 枚举类型 ]: 类型
```
    
# 内置高级类型
    
## Parameters
Parameters 用于提取函数类型的参数类型。
```ts
type Parameters<T extends (...args: any) => any> 
    = T extends (...args: infer P) => any 
        ? P 
        : never;

```
类型参数 T 为待处理的类型，通过 extends 约束为函数，参数和返回值任意。
通过 extends 匹配一个模式类型，提取参数的类型到 infer 声明的局部变量 P 中返回。

![image.png](/static/img/48d5664024a9d8af3c30ed5b78ffaf5a.image.webp)

## ReturnType
ReturnType 用于提取函数类型的返回值类型
```ts
type ReturnType<T extends (...args: any) => any> 
    = T extends (...args: any) => infer R 
        ? R 
        : any;

```
类型参数 T 为待处理的类型，通过 extends 约束为函数类型，参数和返回值任意。

用 T 匹配一个模式类型，提取返回值的类型到 infer 声明的局部变量 R 里返回。

![image.png](/static/img/b712dbdbe10c23e1353dd38bc65d40f6.image.webp)
    
    
## ConstructorParameters
    
构造器类型和函数类型的区别就是可以被 new。

Parameters 用于提取函数参数的类型，而 ConstructorParameters 用于提取构造器参数的类型。
```ts   
type ConstructorParameters<T extends abstract new (...args: any) => any> 
    = T extends abstract new (...args: infer P) => any 
        ? P 
        : never;
```
类型参数 T 是待处理的类型，通过 extends 约束为构造器类型，加个 abstract 代表不能直接被实例化（其实不加也行）。

用 T 匹配一个模式类型，提取参数的部分到 infer 声明的局部变量 P 里，返回 P。
    

![image.png](/static/img/65784f68e2342dc564b6c4342b05b4c5.image.webp)
    
## InstanceType
    
提取了构造器参数的类型，自然也可以提取构造器返回值的类型，就是 InstanceType。
```ts
type InstanceType<T extends abstract new (...args: any) => any> 
    = T extends abstract new (...args: any) => infer R 
        ? R 
        : any;
  
```
整体和 ConstructorParameters 差不多，只不过提取的不再是参数了，而是返回值。

通过模式匹配提取返回值的类型到 infer 声明的局部变量 R 里返回。
    
   
![image.png](/static/img/eecda1fbf807256a833f98ce4a6cab59.image.webp)
    
## ThisParameterType
    
函数里可以调用 this，这个 this 的类型也可以约束
```ts
 type ThisParameterType<T> = 
    T extends (this: infer U, ...args: any[]) => any 
        ? U 
        : unknown;
  
```
## Partial
将泛型中全部属性变为可选

```TS
type Partial<T> = {
    [P in keyof T]?: T[P]
}

```
    
```ts
 type Animal = {
  name: string,
  category: string,
  age: number,
  eat: () => number
}
// 用Partial包裹一下
type PartOfAnimal = Partial<Animal>;
const ww: PartOfAnimal = { name: 'ww' }; // 属性全部可选后，可以只赋值部分属性了
    
```

![image.png](/static/img/f7349a1be65f34a3f5426d5e8f7391ea.image.webp)
    
## Required
作用：将类型 T 中所有的属性变为必选项。
```ts
type Required<T> = {
  [P in keyof T]-?: T[P]
}  
```
这里有一个很有意思的语法-?，你可以理解为就是 TS 中把?可选属性减去的意思。

![image.png](/static/img/743f470bc73ebfa3b3aa5a47ea5d69ed.image.webp)
    
## Readonly
将所有属性变为只读
```ts
 type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
   
```

![image.png](/static/img/c2107290ee84556d0552df8daee40b88.image.webp)
    
## Pick
映射类型的语法用于构造新的索引类型，在构造的过程中可以对索引和值做一些修改或过滤
```ts
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
  
```
类型参数 T 为待处理的类型，类型参数 K 为要过滤出的索引，通过 extends 约束为只能是 T 的索引的子集。

构造新的索引类型返回，索引取自 K，也就是 P in K，值则是它对应的原来的值，也就是 T[P]。

![image.png](/static/img/c6157550038747aa604a1346359952a1.image.webp)
       
## Record<K, T>
作用：将K中所有属性值转化为T类型，常用来声明一个普通object对象。
```ts
 type Record<K extends keyof any,T> = {
  [key in K]: T
}   
```
这里特别说明一下，keyof any对应的类型为number | string | symbol，也就是可以做对象键(专业说法叫索引 index)的类型集合。

![image.png](/static/img/c2321661ba107a69a370fada7929d916.image.webp)

举例如下
    
const obj: Record<string, string> = { 'name': 'zhangsan', 'tag': '打工人' }

![image.png](/static/img/267053d69f3d93f24417655c6c851265.image.webp)

![image.png](/static/img/8fc69739d3347064b253bf9588e535f0.image.webp)


## Exclude<T, U>
作用：在 T 类型中，去除 T 类型和 U 类型的交集，返回剩余的部分。
    
当想从一个联合类型中去掉一部分类型时，可以用 Exclude 类型
```ts
type Exclude<T, U> = T extends U ? never : T
```
注意这里的 extends 返回的 T 是原来的 T 中和 U 无交集的属性，而任何属性联合 never 都是自身
    
联合类型中的每个类型都是相互独立的，TypeScript 对它做了特殊处理，也就是遇到字符串类型、条件类型的时候会把每个类型单独传入做计算，最后把每个类型的计算结果合并成联合类型。

条件类型左边是联合类型的时候就会触法这种处理，叫做分布式条件类型
```ts
   type T0 = Exclude<"a" | "b" | "c", "a" | "f">
            = "a" extends "a"|"f" ? never : "a" | //never
              "b" extends "a"|"f" ? never : "b" |   //"b"
              "c" extends "a"|"f" ? never : "c"     //"c"
            = "b"|"c" 
 ```
    
## Extract
可以过滤掉，自然也可以保留，Exclude 反过来就是 Extract，也就是取交集
```ts
type Extract<T, U> = T extends U ? T : never;
 
```

![image.png](/static/img/a3c5693e36f9e2db89e0a73e6a00cc38.image.webp)

## Omit<T, K>
    
我们知道了 Pick 可以取出索引类型的一部分索引构造成新的索引类型，那反过来就是去掉这部分索引构造成新的索引类型。
    
作用：适用于键值对对象的 Exclude，它会去除类型 T 中包含 K 的键值对。
```ts
type Omit = Pick<T, Exclude<keyof T, K>>
```

![image.png](/static/img/a6fc848312c033a8cc83db8c3939ce20.image.webp)

    
## Awaited
获取多层嵌套Promise的返回值
```ts
 type Awaited<T> =
    T extends null | undefined
        ? T 
        : T extends object & { then(onfulfilled: infer F): any }
            ? F extends ((value: infer V, ...args: any) => any)
                ? Awaited<V>
                : never 
            : T;
   
```
类型参数 T 是待处理的类型。

如果 T 是 null 或者 undefined，就返回 T。

如果 T 是对象并且有 then 方法，那就提取 then 的参数，也就是 onfulfilled 函数的类型到 infer 声明的局部变量 F。

继续提取 onfullfilled 函数类型的第一个参数的类型，也就是 Promise 返回的值的类型到 infer 声明的局部变量 V。

递归的处理提取出来的 V，直到不再满足上面的条件。

![image.png](/static/img/def88e2b465873dc22658c3f0e27f046.image.webp)
    
## Uppercase、Lowercase、Capitalize、Uncapitalize
    
这四个类型是分别实现大写、小写、首字母大写、去掉首字母大写的。

    
    
    

# 模式匹配
## 字符串
### StartsWith
判断字符串是否以某个前缀开头
 ```ts
    type StartsWith<Str extends string, Prefix extends string> = 
    Str extends `${Prefix}${string}` ? true : false;
 ```
 eg: 16进制颜色值
 ```ts
    const color: `#${string}` = "#fff"
  ```