async/await和promise有啥子关联？

async与await？

async 是一个关键字，用于声明一个函数是异步的。异步函数会返回一个 Promise 对象，这个对象在函数执行完成后会被解决。async 函数可以包含 await 表达式。

await 是一个操作符，用于暂停异步函数的执行，直到一个 Promise 对象解决。当一个 await 表达式被执行时，它会暂停函数的执行，直到 Promise 对象解决，并返回该对象的解决值。如果 Promise 被拒绝，则会抛出一个异常

举例

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: 'John', age: 30 };
      resolve(data);
    }, 2000);
  });
}

async function example() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

example();

  在上面的示例中，fetchData 函数返回一个 Promise 对象，example 函数使用 await 等待 fetchData 解决，并打印数据。如果 Promise 被拒绝，则会在 catch 块中捕获错误。

Promise

Promises是在ES6中引入的，是一种无需使用回调即可处理异步操作的方法。Promise代表一个值，它可能还不可用，但将来会解决。该then()方法用于处理已解析的值，该catch()方法用于处理发生的任何错误。

使用promise时会出现的错误

1. 不处理错误：承诺可能会因错误而被拒绝，如果您不使用方法处理错误.catch()，错误将无法处理，并可能导致代码出现问题。

举例

fetch('https://example.com/data')
  .then(response => response.json())
  // 忘记添加catch块来处理错误

  在上面的代码示例中，如果 fetch() 函数返回的 Promise 被拒绝，而没有添加 .catch() 方法来处理错误，那么错误就会被忽略，从而导致应用程序出现问题。

2. 混合使用 Promise 和回调：混合使用 Promise 和回调会使您的代码更难阅读和维护。坚持一种风格的异步代码以保持代码的一致性。

举例

fetch('https://example.com/data')
  .then(response => {
    processData(response, data => {
      // 对处理后的数据采取措施
    });
  })
  .catch(error => {
    console.error(error);
  });

  在上面的代码示例中，使用了一个回调函数来处理 processData() 函数返回的数据。这会使代码更难以阅读和维护。最好只使用 Promises 或回调函数来处理异步操作。

3. 不返回promise：如果您不从函数返回承诺，您将无法使用.then()和.catch()方法来处理结果或错误。

function fetchData() {
  setTimeout(() => {
    const data = { name: 'John', age: 30 };
    return data;
  }, 2000);
}

fetchData().then(data => {
  console.log(data);
   // 这将永远不会被调用，因为fetchData不会返回Promise
});

  在上面的代码示例中，fetchData() 函数返回了一个对象，但是没有返回一个 Promise 对象，所以无法使用 .then() 方法来处理结果。正确的写法应该是：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: 'John', age: 30 };
      resolve(data);
    }, 2000);
  });
}

fetchData().then(data => {
  console.log(data); 
  // 这将在2秒钟后调用
});

4. 不了解resolved Promise表示操作成功，rejected Promise表示操作失败。确保你处理这两种情况

fetch('https://example.com/data')
  .then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Invalid response');
    }
  })
  .then(data => {
    // 处理已解决的promise
  })
  .catch(error => {
    // 处理失败的promise
  });

  在上面的代码示例中，如果 fetch() 函数返回的状态码不是 200，那么 Promise 将被拒绝，并抛出一个错误。在这种情况下，需要使用 .catch() 方法来处理拒绝的 Promise。

5. 不使用 Promise.all() 来处理多个 Promise：当你有多个 Promise 需要处理时，使用Promise.all()可以让你的代码更干净

fetch('https://example.com/data1')
  .then(response1 => {
    fetch('https://example.com/data2')
      .then(response2 => {
        // 对这两种反应都采取行动
      })
      .catch(error => {
        console.error(error);
      });
  })
  .catch(error => {
    console.error(error);
  });

  在上面的代码示例中，使用了嵌套的 .then() 方法来处理两个异步操作。这会导致代码不易读和维护。更好的解决方案是使用 Promise.all() 来处理多个 Promises：

Promise.all([
  fetch('https://example.com/data1'),
  fetch('https://example.com/data2')
])
  .then(responses => {
   // 对这两种反应都采取行动
  })
  .catch(error => {
    console.error(error);
  });

async/await和promise

async/await和Promise是 JavaScript 中用于处理异常操作的两种不同的方法。

• Promise是一个对象，用处理异常操作并返回一个结果。Promise对象有三种状态：pending（等候中）、fulfilled（已成功）和rejected（已失败）。当一一个Promise对象被创建时，它位于等候中状态，当异步操作完成时，Promise对象的状态将变为已经成功或已经失败，然后可以通过.then()或.catch()方法来处理结果。Promise对象使用链接方式调整来处异常操作，这种方式被称为Promise链接。
• async/await是一种更直接的处理方式来处理异步操作。async关键字用在声明一个异步函数，异步函数返回一个Promise对象。在这个异步骤函数中，我们可以使用关键字来暂停停车函数的执行，await直到一个承诺对象被解决。使用async/await可以使用异步代码看起更像同步代码，而不需要使用Promise链接。
• 与Promise相比较，async/await的代码更容易阅读和编写，因为它可以使用不同的步骤代码看起来更像同步骤代码，并且可以使用try-catch 语句来处错误。但是，也有一些不足，比如不能直接处理async/await多个异步操作，而需要使用 Promise.all() 或者其他方法来处理。

总之，Promise而且async/await都是使用针对处理异常操作的方法，它们各有不足之处，需要根据具体的情况来选择使用哪种方法。