Async

async handleSubmit() { await this.handleSubmitReport() // 1 await this.handleSubmitEdit() // 2 this.showSuccess = true // 3 this.showSuccessText = '你已胜利提交查看后果！' },// 执行接口1async handleSubmitReport() { const { data } = await postAction(this.api.report, this.params.hiddenList) if (data.success) { return data.result } else { this.$message.error(data.message) this.$tip.loaded() return null }},// 执行接口2async handleSubmitEdit() { const { data } = await postAction(this.api.edit, this.dataInfo) if (data.success) { return data.result } else { this.$message.error(data.message) this.$tip.loaded() return null }},

文章不易，请关注公众号 毛毛虫的小小蜡笔，多多反对，谢谢。 缺点应用async和await后，咱们的代码看起来是同步的。这个就是它的长处。 await会阻塞前面的代码，直到promise实现。但这会可能呈现因为大量的await，导致promise变慢。 因为每个await都会期待前一个实现才执行，但应用promise尽管代码看起来不是同步的，但申请却是异步的，不会被阻塞。 Demo比方上面截图是发申请的函数： 当在mounted的时候，同时执行多个await函数。如下截图所示： 后果如下截图所示： 很显著这三个申请不是异步的，统计工夫远远大于三个申请工夫之和。 那怎么解决呢？去掉async await 后果如下截图所示： 这个不必多说了，毕竟传统写法就是这样的。 很显著，三个申请是异步的，而且统计工夫霎时少了很多！ 哪还有没有其余耗时更低的办法呢？ 赋值给变量 后果如下截图所示： 统计工夫一下就下来了，不会呈现阻塞导致申请同步 相对而言，该办法比拟适宜。毕竟持续应用了await。 最初文章不易，请关注公众号 毛毛虫的小小蜡笔，多多反对，谢谢。有疑难和问题，请留言。如果感觉文章还能够，请点赞或珍藏，谢谢。

咱们在工作中，可能会接到共事传过来的一个铭单，外面有人铭和号码，咱们想要把这些人都存入手机通讯录以便于之后的工作交接和放弃联系。如果这些人的数量才几十个的话，那间接手动存就能够了，然而如果数量很大，比方几百、上千、上万的话，靠咱们的眼睛和手指来搞是不太可能的。那么通过借助于网络上常见便捷的软件，金芝号码提取导入助手，分简略的四步进行，即可实现题目中的内容：怎么疾速把电话号码批量导存入手机通讯录？上面我做个图文教程解说，通俗易懂。 第一步：把你的资料筹备好，也就是铭字和号码筹备好，如果只有号码没有铭字也能够的，把号码多复制一遍当做铭字就能够。提醒：我下图中的资料是轻易编写的，虚构虚构的，并不是实在存在的，只是为了拿来做操作过程演示。须知！ 第二步：把你的铭字和号码，别离复制过去，粘贴到软件“金芝号码提取导入助手”上，点“转换通讯录”就能够，把转换好的文件保留到电脑桌面即可。 第三步：把方才电脑桌面上的文件，发给手机即可，发送的形式，通过电脑某信或者电脑球球，发给你的手机某信或者手机球球。不须要数据线，很简略传输方式。 第四步：在手机上点开接管到的文件，抉择“其余利用形式关上”。安卓手机，抉择“分割仁”、“电括本”、“拨号与分割仁”等选项，确定，导入即可。苹果手机，抉择“通信禄”或者“拷贝到通信禄”，存储，导入即可。顺着手机的提醒来做，很简略的操作。 以上就是借助网络上常见的软件，金芝号码提取导入助手，疾速把电话号码批量导存入手机通讯录的操作步骤。不论你是安卓手机（小米、华为等）还是你是苹果手机iphone几，跟手机零碎没有关系，都能够通过这种办法把号码存入通讯录。如果你导入的数量很多，稍等个一分钟，你再进去手机看就能够，速度挺快的。

引言async/await是十分棒的语法糖，能够说他是解决异步问题的最终解决方案。从字面意思来了解。async 是异步的意思，而 await 是 期待 ，所以了解 async用于申明一个function是异步的，而 await 用于期待一个异步办法执行实现。 async作用async申明function是一个异步函数，返回一个promise对象，能够应用 then 办法增加回调函数。async函数外部return语句返回的值，会成为then办法回调函数的参数。 async function test() { return 'test';}console.log(test); // [AsyncFunction: test] async函数是[AsyncFunction]构造函数的实例console.log(test()); // Promise { 'test' } // async返回的是一个promise对象test().then(res=>{ console.log(res); // test}) // 如果async函数没有返回值 async函数返回一个undefined的promise对象async function fn() { console.log('没有返回');}console.log(fn()); // Promise { undefined } // 能够看到async函数返回值和Promise.resolve()一样，将返回值包装成promise对象，如果没有返回值就返回undefined的promise对象复制代码awaitawait 操作符只能在异步函数 async function 外部应用。如果一个 Promise 被传递给一个 await 操作符，await 将期待 Promise 失常解决实现并返回其处理结果，也就是说它会阻塞前面的代码，期待 Promise 对象后果。如果期待的不是 Promise 对象，则返回该值自身。 async function test() { return new Promise((resolve)=>{ setTimeout(() => { resolve('test 1000');}, 1000);})}function fn() { return 'fn';} ...

vue.config.js中chainWebpack反对异步数据前言我的项目背景我的项目应用vue-cli4搭建的，如需批改Webpack的配置，须要批改vue.config.js。我的项目中，在chainWebpack中调用了html-webpack-plugin生成dev.html文件。html-webpack-plugin的配置templateParameters反对模板参数注入，反对对象和办法。本文就是基于这个配置做文章。如何配置可参考：templateParameters demo 在html页面接管foo参数，即可取得bar值： <script><%= foo %></script>需要须要在dev.html注入一些数据，而这些数据是异步获取的（调用接口或者其余形式）。我这里是须要通过Node.js的child_process执行git命令，获取分支信息。尝试templateParameters反对function。能够尝试传入async办法，通过await获取到数据后，再返回。遇到问题chainWebpack和templateParameters均不反对异步。 chainWebpack改为异步后，打包报错。templateParameters改为异步后，虽不影响打包，然而变量不失效。 苦于vue-cli-service和html-webpack-plugin均不反对异步，只能另想办法。 解决查阅材料先通过百度，国内貌似没有相似的记录文章。而后Google，果然找到了相似需要： Vue config async support 有人提出了相似的issue，尽管作者没有间接解决，然而也给出了一个work around： 改代码这个办法的思路，实际上将npm run serve包了一层wrap，在外层拿到数据后，再通过代码调用npm run serve开始打包。接下来咱们来实现这个wrap。 首先新建一个文件serve.prehandle.js，用于wrap。先获取异步数据，待拿到之后再开始打包： const getGitDevInfo = require('./src/pages/demo/webpack-plugin/git-info')const isDevEnv = process.env.NODE_ENV !== 'production'module.exports = (api, options) => { api.registerCommand('serve:prehandle', async (args) => { if (isDevEnv) { const def = await getGitDevInfo() process.asyncParamter = def } await api.service.run('serve', args) })}module.exports.defaultModes = { 'serve:prehandle': 'development'}而后批改package.json 批改serve命令 { "scripts": { "serve": "vue-cli-service serve:prehandle" }}减少vuePlugins，对应下面的serve.prehandle命令，为这条命令指定解决文件 ...