async和await使用总结

收集自后盾人网站，作自己备查使用

1.类中使用

和 promise 一样，await 也可以操作thenables 对象

class User {
  constructor(name) {
    this.name = name;
  }
  then(resolve, reject) {
    let user = ajax(`http://localhost:8888/php/user.php?name=${this.name}`);//自己封装的ajax，返回一个promise
    resolve(user);
  }
}
async function get() {
  let user = await new User("33");
  console.log(user);
}
get();

2.类方法也可以通过 async 与 await 来操作promise

class User {
  constructor() {}
  async get(name) {
    let user = await ajax(
      `http://localhost:8888/php/user.php?name=${name}`
    );
    user.name += "-houdunren.com";
    return user;
  }
}
new User().get("33").then(resolve => {
  console.log(resolve);
});

3.函数声明

async function get(name) {
  return await ajax(`http://localhost:8888/php/user.php?name=${name}`);
}
get("后盾人").then(user => {
  console.log(user);
});

let get = async function(name) {
  return await ajax(`http://localhost:8888/php/user.php?name=${name}`);
};
get("后盾人").then(user => {
  console.log(user);
});

4.对象方法中使用

let hd = {
  async get(name) {
    return await ajax(`http://localhost:8888/php/user.php?name=${name}`);
  }
};

hd.get("后盾人").then(user => {
  console.log(user);
});

5.类中使用

class User {
  async get(name) {
    return await ajax(`http://localhost:8888/php/user.php?name=${name}`);
  }
}
let user = new User().get("后盾人").then(user => {
  console.log(user);
});

6.错误处理

async 内部发生的错误，会将必变promise对象为rejected 状态，所以可以使用catch 来处理

async function hd() {
  console.log(houdunren);
}
hd().catch(error => {
  throw new Error(error);
});

如果promise 被拒绝将抛出异常，可以使用 try...catch 处理错误

async function get(name) {
  try {
    let user = await ajax(
      `http://localhost:8888/php/user.php?name=${name}`
    );
    console.log(user);
  } catch (error) {
    alert("用户不存在");
  }
}
get("老师");

多个 await 时当前面的出现失败，后面的将不可以执行

async function hd() {
  await Promise.reject("fail");
  await Promise.resolve("success").then(value => {
    console.log(value);
  });
}
hd();

如果对前一个错误进行了处理，后面的 await 可以继续执行

async function hd() {
  await Promise.reject("fail").catch(e => console.log(e));
  await Promise.resolve("success").then(value => {
    console.log(value);
  });
}
hd();

也可以使用 try...catch 特性忽略不必要的错误

async function hd() {
  try {
    await Promise.reject("fail");
  } catch (error) {}
  await Promise.resolve("success").then(value => {
    console.log(value);
  });
}
hd();

也可以将多个 await 放在 try...catch 中统一处理错误

async function hd(name) {
  const host = "http://localhost:8888/php";
  try {
    const user = await ajax(`${host}/user.php?name=${name}`);
    const lessons = await ajax(`${host}/user.php?id=${user.id}`);
    console.log(lessons);
  } catch (error) {
    console.log("用户不存在");
  }
}
hd("教程");

7.并发执行

有时需要多个await 同时执行，有以下几种方法处理，下面多个await 将产生等待

async function p1() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("houdunren");
      resolve();
    }, 2000);
  });
}
async function p2() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("hdcms");
      resolve();
    }, 2000);
  });
}
async function hd() {
  await p1();
  await p2();
}
hd();

使用 Promise.all() 处理多个promise并行执行

async function hd() {
  await Promise.all([p1(), p2()]);
}
hd();

让promise先执行后再使用await处理结果

async function hd() {
  let h1 = p1();
  let h2 = p2();
  await h1;
  await h2;
}
hd();