async与await的知识点和使用方法...

1.含义

1. ES2017 标准引入了 async 函数，使得异步操作变得更加方便。
2. async 函数是什么？一句话，它就是 Generator 函数的语法糖。
3. 前文有一个 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());
};

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

async函数对 Generator 函数的改进，体现在以下四点。

（1）内置执行器

Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

asyncReadFile();

上面的代码调用了asyncReadFile函数，然后它就会自动执行，输出最后结果。这完全不像 Generator 函数，需要调用next方法，或者用co模块，才能真正执行，得到最后结果。

（2）更好的语义。

async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

（3）更广的适用性。

co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。

（4）返回值是 Promise。

async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

2.基本用法

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

下面是一个例子。

async function getStockPriceByName(name) {
  const symbol = await getStockSymbol(name);
  const stockPrice = await getStockPrice(symbol);
  return stockPrice;
}
 
getStockPriceByName('goog').then(function (result) {
  console.log(result);
});

上面代码是一个获取股票报价的函数，函数前面的async关键字，表明该函数内部有异步操作。调用该函数时，会立即返回一个Promise对象。

下面是另一个例子，指定多少毫秒后输出一个值。

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
 
async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}
 
asyncPrint('hello world', 50);

上面代码指定 50 毫秒以后，输出hello world。

由于async函数返回的是 Promise 对象，可以作为await命令的参数。所以，上面的例子也可以写成下面的形式。

async function timeout(ms) {
  await new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
 
async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}
 
asyncPrint('hello world', 50);

async通俗来讲：

            async，它就是 Generator 函数的语法糖

            1.async函数的返回值为promise对象

async function fn(){
            console.log(111);
            return "hello world"
        }
 
        let rst=fn();//promise
 
        // console.log(rst);
        rst.then(rst=>{
            console.log(rst);
        })

await通俗来讲：

            1.await是一个命令

            2.await只能在async函数中使用

            3.await可以解析promise成功的结果,并将结果返回

let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(111);
                resolve({ code: 200, msg: "ok" })
            }, 1000)
        });
 
 
        // p.then(rst=>{
        //     console.log(rst);
        // })
 
        async function show() {
            //...
            return "helo world"
        }
 
        async function fn() {
            let rst = await p;
            console.log(rst);
            let rst1 = await show();
            console.log(rst1);
        }
 
        fn();

3.fetch搭配async和await使用 

fetch是什么：是一种新的前后端交互的方式，比ajax，form表单，axios都好用，是一种很简便，容易上手的一种前后端交互方式

Fetch API 提供了一个获取资源的接口（包括跨域请求），用于取代传统的XMLHttpRequest的，在 JavaScript 脚本里面发出 HTTP 请求。

目前还没有被所有浏览器支持，如果考虑低版本浏览器的问题的话，引入https://github.com/github/fetch/blob/master/fetch.js 即可兼容。

fetch api是基于promise的设计，返回的是Promise对象，它是为了取代传统xhr的不合理的写法而生的。

fetch()请求成功以后，得到的是一个 Response 对象。它对应服务器的 HTTP 回应。
Response 包含的数据通过 Stream 接口异步读取，但是它还包含一些同步属性，对应 HTTP 回应的标头信息（Headers），可以立即读取。 

例如：从服务器获取 JSON 数据

fetch('https://api.github.com/users/ruanyf')
	// fetch()接收到的response是一个 Stream 对象
	// response.json()是一个异步操作，取出所有内容，并将其转为 JSON 对象
  .then(response => response.json()) 
  .then(json => console.log(json))
  .catch(err => console.log('Request Failed', err)); 
 
// 等价于以下写法
async function getJSON() {
  let url = 'https://api.github.com/users/ruanyf';
  try {
    let response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.log('Request Failed', error);
  }
}
console.log(getJSON());	// 获取到的json数据

async和await必须要搭配使用，就好像是一对cp， 是非常重要的一个知识点 ，请同学们多实践操作 ，同时fetch也是一种新技术，简单便捷，占据市场很大份额，是需要必备的一种技术。感觉到有帮助就给作者点个关注吧！