JS的异步编程过程中的问题集锦、echarts使用记录。

友人a丶
JS笔记
2021-12-09
1010热度
0评论

描述一下今天的业务场景

为了方便维护，在JS里的把html模板和业务逻辑做了分离，在业务逻辑里向模板对象传递指定的data对象返回生成好的html，以往的数据对象是用户交互产生的，今天需要改成从接口拉取。

按照以往的逻辑，获取用户的交互数据，传递给模板。基本上是同步的，今天修改的时候为了不触碰原有的代码，把网络请求单独放在了其他对象里，业务流程变成了，调用网络请求函数产生的返回值作为数据对象传递给模板对象。

一切看似没问题，结果模板解析的时候数据对象能正常打印显示数据对象，但是输出的html是空的。研究了好一会，才发现没考虑异步的问题（JS遇见异步函数，放进执行队列，不等待它执行完成，而直接执行后面的代码）；

数据对象在网络请求没完成的时候，已经开始解析模板了。（但是这个打印的时候有正常数据被打印，这就比较迷了），通过debugger断点，得知data是空的。然后就是改进了：

将模板调用往后的业务逻辑放在网络请求的回调函数，。
使用promise对象，请求完毕的回调函数内调用resolve传递数据，然后在promise的then方法里调用模板对象之后的业务逻辑；
await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，获取async函数的返回值可通过await；

echarts使用记录

图例（legend）、标题（title）、文字提醒（tooltip）、表格类型和样式（serial）、坐标系（Grid）、x轴（xAxis）、Y轴（yAxis）、样式（itemStyle、areaStyle、lineStyle）

1.配置项说明

title，标题组件，包含主标题和副标题。
legend，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
grid ，代表整个坐标系的配置，直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
```
 grid:{
     left:"5%",
     top:"5%",
     right:"5%",
     bottom:"8%"
}
```
xAxis，直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
yAxis，直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴。
dataZoom ，用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
tooltip，数据提示框组件。
color，调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
textStyle，全局字体样式。

series，设置图表的数据及类型和样式。

series: [{
    name: 'Funnel',
    type: 'funnel',
    left: '10%',
    top: 0,
    bottom: 0,
    width: '50%',
    min: 0,
    max: 100,
    minSize: '0%',
    maxSize: '100%',
    sort: 'descending',
    gap: 2,
    label: {show: true, position: 'inside'},
    labelLine: {length: 10, lineStyle: {width: 1, type: 'solid'}},
    itemStyle: {borderColor: '#fff', borderWidth: 1},
    emphasis: {label: {fontSize: 20}},
    data: [{value: 50, name: '发起申请'}, {value: 60, name: '新增好友数'}, {value: 70, name: '主动触达数'}, {
        value: 80,
        name: '互动数'
    }, {value: 90, name: '有效互动数'}],
}]

label ，图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
type，定义图表的类型。

2.渐变内置生成器echarts.graphic.LinearGradient

 series: [
            {
                name: '发起申请',
                type: 'line',
                smooth: true,
                showSymbol: false,
                stack: 'Total',
                areaStyle: {
                    opacity: 0.5,
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#5768FF10'
                        },
                        {
                            offset: 1,
                            color: '#5768FF'
                        }
                    ])
                },
                data: [20, 20, 40, 40, 50, 50, 60, 60, 70, 70, 80, 80, 90, 90]
            }
        ]

前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始.
第5个参数则是一个数组, 用于配置颜色的渐变过程. 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色

JS Api

1.Notifications API 接口用于向用户配置和显示桌面通知。

Notification.requestPermission().then(function (permission) {
      // 如果用户接受权限，我们就可以发起一条消息
      if (permission === "granted") {
         var notification = new Notification("Hi there!");
      }
});

2.全屏Api：https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API

4.JS异步编程：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous

全屏切换

 /*是否处于全屏*/
if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
} else {
   /*接口是否可用*/
    if(document.exitFullscreen) {
       document.exitFullscreen();
    }                                      
}

宏任务、微任务

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于 Browsing Context，一种是基于 Worker。二者的运行是独立的，也就是说，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。