在项目的开发过程中,同步异步是一个很重要的概念。但是在js中,又会有稍微的不同。

依据微软的MSDN上的解说:

(1) 同步函数:当一个函数是同步执行时,那么当该函数被调用时不会立即返回,直到该函数所要做的事情全都做完了才返回。

(2) 异步函数:如果一个异步函数被调用时,该函数会立即返回尽管该函数规定的操作任务还没有完成。

我们从效率上进行比较同步函数与异步函数,我们可以发现,同步函数是一个完成了再执行下一个,而异步函数是调用就返回。

自然是同步函数效率更低,但是相比于,异步函数的不可靠,不等被调方返回结果就转身离去,同步函数至少在执行力上强于异步函数。

由于异步调用容易出问题,要设计一个安全高效的编程方案需要比较多的设计经验,所以最好不要滥用异步调用。同步调用毕竟让人更舒服些:不管程序走到哪里,只要死盯着移动点就能心中有数,不至于象异步调用那样,总有一种四面受敌、惶惶不安的感觉。必要时甚至可以把异步函数转换为同步函数。方法很简单:调用异步函数后马上调用 wait 函数等在那里,待异步函数返回结果后再继续往下走。

假如回调函数中包含文件处理之类的低速处理,调用方等不得,需要把同步调用改为异步调用,去启动一个单独的线程,然后马上执行后续代码,其余的事让线程慢慢去做。一个替代办法是借 API 函数 PostMessage 发送一个异步消息,然后立即执行后续代码。这要比自己搞个线程省事许多,而且更安全。

现在出现了我们的async异步函数,我们来看看它是如何保证了异步函数的准确运行

async 函数是什么?一句话,它就是 Generator 函数的语法糖。

那什么是Generator 函数呢?

我们先来看一个例子

function* helloWorldGenerator(){
yield 'hello';
yield 'world';
return 'ending'
}
var hw=helloWorldGenerator();
hw.next()
// { value: 'hello', done: false }
//又或者
hw.next()
// { value: 'world', done: false } hw.next()
// { value: 'ending', done: true } hw.next()
// { value: undefined, done: true }

总结一下就是调用 Generator 函数,返回一个遍历器对象,代表 Generator 函数的内部指针。以后,每次调用遍历器对象的next方法,

就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值,是yield表达式后面那个表达式的值;done属性是一个布尔值,

表示是否遍历结束。

下文是有一个 Generator 函数,依次读取两个文件。

const fs = require('fs');

const readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) return reject(error);
resolve(data);
});
});
}; const gen = function* () {
const f1 = yield readFile('/etc/fstab');
const f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};

上面代码的函数gen可以写成async函数,就是下面这样。

const asyncReadFile = async function () {
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};

阮一峰的es6上说

一比较就会发现,async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。

其实我写本文的最终目的就是来自一句话,一句话顿悟了我,其实很简单的一句话

async异步函数,加了await就是把函数变成同步。(函数既然同步了,那就是按照循序执行,方便使用,方便查看顺序。)

关于使用async异步函数封装react组件的方法

import React,{Component} from 'react'
import './NewComponent.less'
import { List, Avatar,Modal} from 'antd';
const prefix="liu-chang-c-new-Component"; class NewComponent extends Component{ state = {
ComponentList: [],
} componentDidMount() {
this.queryComponent();
} queryComponent = async () => {
const ComponentList = [];
for (let i = 0; i < 10; i++) {
ComponentList.push({
href: 'http://ant.design',
title: `ynne Lan${i}`,
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
description: 'edit',
content: ' Device Group Name: 001Device Group: 001',
time:'Today 19:16'
});
} this.setState({ComponentList});
} showComponentInfo = (data) => {
Modal.info({
title: 'This is a notification message',
content: (
<div>
<p>{data.title}</p>
<p>{data.time}</p>
<p>{data.description}</p>
<p>{data.content}</p>
</div>
),
onOk() {},
okText: 'Close',
});
} render() {
const { ComponentList } = this.state;
return (
<div className={prefix} >
<List
className={`${prefix}-list`}
itemLayout="vertical"
size="large" pagination={{
onChange: (page) => {
console.Component(page);
},
pageSize: 3,
}}
dataSource={ComponentList}
renderItem={item => (
<List.Item
key={item.title}
extra={item.time}
className={`${prefix}-item`}
onClick={() => this.showComponentInfo(item)}
>
<List.Item.Meta
className={`${prefix}-meta`}
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={<a href={item.href}>{item.title}</a>}
description={item.description}
/>
{item.content} </List.Item>
)}
/>
</div>
)
}
} export default NewComponent;

本文参考文章

http://es6.ruanyifeng.com/#docs/async

https://www.cnblogs.com/balingybj/p/4780442.html

有趣的async的更多相关文章

  1. ASP.NET 中的 Async/Await 简介

    本文转载自MSDN 作者:Stephen Cleary 原文地址:https://msdn.microsoft.com/en-us/magazine/dn802603.aspx 大多数有关 async ...

  2. 异步编程系列第01章 Async异步编程简介

    p { display: block; margin: 3px 0 0 0; } --> 2016.10.11补充 三个月过去了,回头来看,我不得不承认这是一系列失败的翻译.过段时间,我将重新翻 ...

  3. ASP.NET 上的 Async/Await 简介

    原文链接 大多数有关 async/await 的在线资源假定您正在开发客户端应用程序,但在服务器上有 async 的位置吗?可以非常肯定地回答“有”.本文是对 ASP.NET 上异步请求的概念性概述, ...

  4. 小心C# 5.0 中的await and async模式造成的死锁

    平时在使用C# 5.0中的await and async关键字的时候总是没注意,直到今天在调试一个ASP.NET项目时,发现在调用一个声明为async的方法后,程序老是莫名其妙的被卡住,就算声明为as ...

  5. node.async.auto

    资料 GITHUB async ASYNC详解—from csdn nodejs的高性能与灵活性让服务端开发变得有了些乐趣,最近在看nodejs在服务端的一些应用,觉得其npm下的众多开源包让其虽没有 ...

  6. async/task/await

    async/task/await三组合是.NET Framework 4.5带给.NET开发者的大礼,合理地使用它,可以提高应用程序的吞吐能力. 但是它的使用有点绕人,如果不正确使用,会带来意想不到的 ...

  7. 如何避免 async/await 地狱

    简评:async/await 写着很爽,不过要注意这些问题. async/await 让我们摆脱了回调地狱,但是这又引入了 async/await 地狱的问题. 什么是 async/await 地狱 ...

  8. 如何避免 await/async 地狱

    原文地址:How to escape async/await hell 译文出自:夜色镇歌的个人博客 async/await 把我们从回调地狱中解救了出来,但是如果滥用就会掉进 async/await ...

  9. 异步async、await和Future的使用技巧

    由于前面的HTTP请求用到了异步操作,不少小伙伴都被这个问题折了下腰,今天总结分享下实战成果.Dart是一个单线程的语言,遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞, ...

随机推荐

  1. 分布式监控系统Zabbix3.4-钉钉告警配置记录

    群机器人是钉钉群的高级扩展功能,群机器人可以将第三方服务的信息聚合到群聊中,实现自动化的信息同步.例如:通过聚合GitHub,GitLab等源码管理服务,实现源码更新同步:通过聚合Trello,JIR ...

  2. Centos下堡垒机Jumpserver V3.0环境部署完整记录(1)-安装篇

    由于来源身份不明.越权操作.密码泄露.数据被窃.违规操作等因素都可能会使运营的业务系统面临严重威胁,一旦发生事故,如果不能快速定位事故原因,运维人员往往就会背黑锅.几种常见的运维人员背黑锅场景:1)由 ...

  3. jackson出现错误 Unrecognized field,几种处理方法

    1.请求的JSON里面字段多余映射的实体类,可以通过在类的顶部添加@JsonIgnoreProperties,2.0版本引入 import org.codehaus.jackson.annotate. ...

  4. 电梯调度系统(界面由C图形库编绘)

    1.编程题目 电梯调度系统 2.结对编程组员 黄冠译,刘畅 3.编程语言 C语言图形库 4题目要求 编写人员:刘畅,黄冠译 代码如下: # include <stdio.h> # incl ...

  5. [BUAA软工]第二次博客作业---结对编程

    [BUAA软工]结对作业 项目 内容 这个作业属于哪个课程 北航软工 这个作业的要求在哪里 2019年软件工程基础-结对项目作业 我在这个课程的目标是 学习如何以团队的形式开发软件,提升个人软件开发能 ...

  6. java.lang.Exception: No tests found matching Method tes(com.bw.test.Testrefiect) from org.junit.vintage.engine.descriptor.RunnerRequest@3bfdc050 at org.junit.internal.requests.FilterRequest.getRunner

    junit   方法  没有加上注解  @Test java.lang.Exception: No tests found matching Method tes(com.bw.test.Testre ...

  7. Oracle备份恢复简单过程以及中间的坑.

    Oracle 冷备: 貌似需要dbca创建一致的oracle instance 服务器配置版本尽量相同,安装路径相同. 关闭Oracle服务 将oracle app 目录下的oradata以及有快速闪 ...

  8. css 按钮凹陷的感觉

    .login-btn{ margin-top: 60rpx !important; background-color:transparent !important; width: 40%; margi ...

  9. ubuntu安装命令

    sudo apt-get update  更新源sudo apt-get install package 安装包sudo apt-get remove package 删除包sudo apt-cach ...

  10. elk认证模块x-pack安装

    一.elasticsearch安装x-pack elasticsearch/bin/elasticsearch-plugin install x-pack ######## -> Downloa ...