一次性让你懂async/await-一一网

1.什么是async？

async 函数是 Generator 函数的语法糖。使用关键字 async 来表示，在函数内部使用 await 来表示异步。相较于 Generator，async 函数的改进在于下面四点：

内置执行器。Generator 函数的执行必须依靠执行器，而 async 函数自带执行器，调用方式跟普通函数的调用一样。

更好的语义。async 和 await 相较于 * 和 yield 更加语义化。

更广的适用性。co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者原始类型的值（Number，string，boolean，但这时等同于同步操作）。

返回值是 Promise。async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator 对象方便，可以直接使用 then() 方法进行调用。

async是ES7新出的特性，表明当前函数是异步函数，不会阻塞线程导致后续代码停止运行。

2.怎么用？

申明之后就可以进行调用了

（1）

async function asyncFn() {
　　return 'hello world';
}
asyncFn();
复制代码

这样就表示这是异步函数，返回的结果

（2）

async function asyncFn() {
    return '我后执行'
}
asyncFn().then(result => {
    console.log(result);
})
console.log('我先执行');
复制代码

上面的执行结果是先打印出’我先执行’，虽然是上面asyncFn()先执行，但是已经被定义异步函数了，不会影响后续函数的执行。

现在理解了async基本的使用，那还有什么特性呢？

（3）async定义的函数内部会默认返回一个promise对象，如果函数内部抛出异常或者是返回reject，都会使函数的promise状态为失败reject。

async function e() {    
    throw new Error('has Error');
}
e().then(success => console.log('成功', success)) 
   .catch(error => console.log('失败', error));
复制代码

我们看到函数内部抛出了一个异常，返回reject，async函数接收到之后，判定执行失败进入catch，该返回的错误打印了出来。

（4）

async function throwStatus() {    
    return '可以返回所有类型的值'
}
throwStatus().then(success => console.log('成功', success))             
             .catch(error => console.log('失败', error));

//打印结果

成功 可以返回所有类型的值
复制代码

async函数接收到返回的值，发现不是异常或者reject，则判定成功，这里可以return各种数据类型的值，false,NaN,undefined…总之，都是resolve

但是返回如下结果会使async函数判定失败reject

内部含有直接使用并且未声明的变量或者函数。

内部抛出一个错误throw new Error或者返回reject状态return Promise.reject(‘执行失败’)

函数方法执行出错（?：Object使用push()）等等…

还有一点，在async里，必须要将结果return回来，不然的话不管是执行reject还是resolved的值都为undefine，建议使用箭头函数。
其余返回结果都是判定resolved成功执行。

（5）

//正确reject方法。必须将reject状态return出去。
async function PromiseError() {    
   return Promise.reject('has Promise Error');
}

//这是错误的做法，并且判定resolve，返回值为undefined,并且Uncaught报错
async function PromiseError() {
  Promise.reject('这是错误的做法');
}

PromiseError().then(success => console.log('成功', success))              
              .catch(error => console.log('失败', error));
复制代码

3.为什么要用async

(1)隐藏promise，便于理解

假设我们想请求一个接口，然后把响应的数据打印出来，并且捕获异常。用 Promise 大概是这样写：

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}
复制代码

如果用 async 函数来写，大概是这个样子：

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}
复制代码