Ionic React中该async点击处理函数的功能是什么

先给刚接触async/await的你补两个最实用的核心规则，看懂这段代码足够用：

• 函数前面加async标记，代表这是个异步函数，函数内部才能使用await关键字
• await的作用是「暂停当前函数的执行，等后面的异步操作完全做完、拿到返回结果，再继续往下跑后面的代码」，这个等待过程不会卡住整个页面的其他交互

这段代码定义的handleClick是绑定在按钮上的点击事件回调，接收两个入参：点击事件对象e、按钮对应的操作类型operator，目前只实现了计算器类应用常见的两个存储相关操作，同时做了安卓端和其他端（Web、iOS等）的存储兼容，具体执行逻辑分两种情况：

操作类型为MC（清除历史存储）时 #

• 首先通过isPlatform("android")判断当前运行环境：
  • 安卓环境：调用Ionic原生封装的Storage插件，删除key为history的存储项，前面加await是因为原生存储读写是异步操作，要等删除真的执行完成再走后续逻辑
  • 非安卓环境：直接调用浏览器标准同步接口window.localStorage.removeItem删除history项，不需要等待
• 存储清理完成后，返回false终止函数执行

操作类型为MR（读取历史存储）时 #

• 先初始化两个空变量：storage用来存从存储层读到的原始字符串内容，parse用来存JSON反序列化之后的JS对象
• 同样先判断运行平台：
  • 安卓环境：用await等待原生Storage.get方法读完history对应的内容，原生存储返回的结果是对象格式，实际存在value字段上，所以取storage.value做JSON解析，赋值给parse
  • 非安卓环境：读取localStorage里的history值，这里加await不影响逻辑（localStorage本身是同步接口），拿到字符串后直接做JSON解析赋值给parse
• 拿到解析后的历史记录数组后，取第一条记录的计算表达式值（代码里写的expration是笔误，大概率是expression），调用React状态更新方法setSumHistory把这个值同步到页面上渲染
• 最后返回false终止函数执行

小提示：这段代码有个不影响运行的冗余写法：MR分支的平台判断块内部重复用let storage声明了变量，因为块级作用域的原因，内部声明的storage和外面初始化的storage不是同一个变量，属于无效代码，可以删掉内部的let关键字。

内容的提问来源于stack exchange，提问作者Hector Funes