请看下面的详细攻略：

前端常见面试题之async/await和promise的区别

在前端开发中，异步编程无处不在。在异步编程中 Promise 和 async/await 是常用的两种方案。虽然它们都用于解决异步任务的问题，但是在使用上，还是有一些明显的区别的。

Promise

Promise 是一种广泛应用的异步编程技术。整个异步流程是通过 Promise 构建的，其主要特点是：

• 通过 Promise 封装异步操作，可以很方便地控制异步任务的执行流程
• Promise 链式调用的方式可以使代码逻辑更加清晰
• Promise 有自己的状态机状态，包括 pending、fulfilled 和 rejected 三种状态，其中只能从 pending 过度到 fulfilled 或 rejected。

下面是一个 Promise 的例子：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved!");
  }, 3000);
});

promise1
  .then(result => {
    console.log(result);
  })
  .catch(err => {
    console.error("Promise rejected: " + err);
  });

上述代码使用 Promise 来封装了一个异步任务，并在任务执行完成后使用链式调用的方式处理任务的执行结果。

async/await

在 ECMAScript 8 中，引入了新的异步编程语法，使用 async 和 await 关键字来简化异步代码的编写，其主要特点是：

• 在函数前面使用 async 关键字，表明该函数是一个异步函数
• 在异步函数内部使用 await 关键字，将异步任务的处理暂停，直到任务执行完成。
• async/await 可以很好地处理异步任务中的错误。

下面是一个使用 async/await 处理异步任务的例子：

async function asyncExample() {
  try {
    const result = await promise1;
    console.log(result);
  } catch(err) {
    console.error("Promise rejected: " + err);
  }
}

asyncExample();

上面的代码使用了 async/await 来处理异步任务。通过将 Promise 对象 await 在异步函数内暂停任务流程，等待 Promise 对象完成后继续执行剩余的代码。

async/await 和 Promise 的区别

虽然 async/await 和 Promise 都可以用来解决异步编程的问题，但是在使用上还是有一些区别的。

1. 语法上的区别

• async/await 更直观。使用 Promise 进行异步编程时，需要使用 then 进行链式调用，语法相对不够直观，而 async/await 更加直观。
• async/await 更加简洁。使用 Promise 进行异步编程时，会存在大量的回调函数嵌套，而使用 async/await 可以将代码写得更加简洁明了。

2. 错误处理的区别

• Promise 更好的报错。在一个 Promise 链上，如果出现了错误，会直接跳转到 catch 中，保证代码的健壮性。
• async/await 更加容易抛出错误。在使用 async/await 进行异步编程时，很容易忘记使用 try...catch 语句来进行错误的处理，造成代码的不健壮。

总结起来，async/await 代码相对更加直观简洁，而 Promise 具备更好的错误处理能力，选择使用哪种方案，需要根据实际情况来进行权衡。

示例说明

下面给出两个使用 async/await 和 Promise 的示例，演示如何使用这两个异步编程技术解决问题。

示例 1：async/await 示例

假设我们需要按照顺序依次展示若干张图片，那么我们可以使用 async/await 技术编写如下的代码：

function showImage(imageUrl) {
  const image = document.createElement("img");
  image.src = imageUrl;
  document.body.appendChild(image);
}

async function showImages(imageUrls) {
  for(let i = 0; i < imageUrls.length; i++) {
    await new Promise(resolve => {
      setTimeout(() => {
        showImage(imageUrls[i]);
        resolve();
      }, 1000 + i * 500);
    });
  }
}

const images = [
  "https://xxx.com/1.png",
  "https://xxx.com/2.png",
  "https://xxx.com/3.png",
];
showImages(images);

上面的代码使用了 async/await 技术，通过 for 循环控制图片依次展示的顺序，等待上一张图片加载完成后再添加下一张图片的信息，从而实现了图片的顺序展示。

示例 2：Promise 示例

假设我们需要比较两个数字的大小，我们可以使用 Promise 来编写如下的代码：

function compare(x, y) {
  return new Promise((resolve, reject) => {
    if (x > y) {
      resolve("x is greater than y.");
    } else if (x < y) {
      resolve("y is greater than x.");
    } else {
      reject("x equals y.");
    }
  });
}

compare(2, 3)
  .then(result => {
    console.log(result);
  })
  .catch(err => {
    console.error("Error: " + err);
  });

上面的代码使用了 Promise ，封装了比较两个数字大小的操作，并通过链式调用展示执行结果，更好地完成了异步编程的任务。

结语

本篇文章介绍了 async/await 和 Promise，讲解了它们的关系和使用方法。在实际项目中，我们可以根据具体需求和技术特性选择合适的异步编程方案，提高项目的开发效率和质量。