有趣的async

在项目的开发过程中，同步异步是一个很重要的概念。但是在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