JavaScript async和await

JavaScript async和await

一,概念

ES2017标准引入了async函数,使得异步操作变得更加方便,有人说,这是解决回调地狱的终极方案

async函数是什么?其实它就是Generator函数的语法糖.

async函数就是将Generator函数的星号(*),替换成async,将yield替换成了awaitj仅此而已.async和await,比起星号和yield,语义更清晰.

async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果.

二.基本使用

1.async

async函数返回一个Promise对象,可以使用then方法添加回调函数.
async函数内部的return语句返回的值,会成为then方法回调函数的参数.

async function foo() {
    return 'hello world';
}
foo().then(res => {
    console.log(res);//hello world
});
console.log('我先执行');//我先执行
console.log(foo());//Promise {: "hello world"}

上述

1. async 使用形式

async函数有多种使用形式

• 函数声明

  async function foo(){}
  

• 函数表达式

  const foo=async function(){}
  

• 对象的方法

  let obj={async foo(){}}
  obj.foo().then(....);
  

• Class的方法

  class Cat{
      constructor(){
          
      }
      //实例方法,异步
      async show(){}
  }
  
  let cat=new Cat();
  cat.show().then(....);
  

• 箭头函数

  let foo=async ()=>{}
  

• 立即执行函数

  (async function(){
      // ...
  })();
  

2. 异常处理

async函数内部抛出错误,导致返回的Promise对象变为reject状态,抛出的错误对象会被catch()方法回调函数接收到

async function foo() {
    throw new Error('错误');
}
foo().then(res => {
    console.log(res);
}).catch(error=>{
    console.log(error);//Error: 错误
});

3. Promise对象状态的变化

async函数返回的是Promise对象,必须等到内部所有的await命令后面的Promise对象执行完,才会发生状态的改变,除非遇到return语句或者抛出错误.也就是说,只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数.

async function getTitle(url) {
  let response = await fetch(url);
  let html = await response.text();
  return html.match(/