细数Promise与Async/Await的使用及区别说明

什么是Promise

Promise是异步编程的一种解决方案，最早于2015年被ECMAScript 6提出。它是一种对象，可以使得异步操作更加优雅、重用性更好。

Promise的状态

• Pending：初始状态，既不是成功，也不是失败状态。
• Resolved：操作成功，并返回结果。
• Rejected：操作失败，抛出错误。

Promise的基本使用

function someAsyncThing() {
  return new Promise(function(resolve, reject) {
    // 异步操作
    resolve(result); // 操作成功，返回结果
    reject(error); // 操作失败，抛出错误
  });
}

someAsyncThing()
.then(function(result) {
  console.log(result);
})
.catch(function(error) {
  console.error(error);
});

Promise的优点

• 链式写法，代码更加优雅。
• 拆分异步操作，降低代码耦合。
• 可以轻松进行错误处理。

什么是Async/Await

Async/Await是ECMAScript 2017提出的解决方案，它是基于Promise的一种语法糖，旨在让异步编程更加易读、易写。

Async/Await的使用

• Async：声明该函数为异步函数。
• Await：在异步函数中等待Promise对象的完成。

async function someAsyncThing() {
  try {
    const result = await Promise.resolve('Async/Await');
    console.log(result); // 输出 'Async/Await'
  } catch (error) {
    console.error(error);
  }
}

someAsyncThing();

Async/Await的优点

• 代码更加优雅、易读。
• 可以和Promise很好的混用，易于维护。
• 可以轻松进行错误处理。

Promise与Async/Await的区别

Promise与Async/Await的代码对比

• Promise

function someAsyncThing() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Promise');
    }, 1000);
  });
}

someAsyncThing()
.then(function(result) {
  console.log(result); // 输出 'Promise'
})
.catch(function(error) {
  console.error(error);
});

• Async/Await

async function someAsyncThing() {
  try {
    const result = await new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve('Async/Await');
      }, 1000);
    });
    console.log(result); // 输出 'Async/Await'
  } catch (error) {
    console.error(error);
  }
}

someAsyncThing();

区别

• Promise可以通过then()方法链式调用异步操作，而Async/Await需要在异步函数中等待Promise对象完成操作。
• Async/Await的代码更加优雅，易于维护。
• Async/Await只能用于异步函数中，而Promise可以用于任何函数中。

示例说明

Promise示例

以下代码通过Promise实现了异步操作并返回结果：

function getUserData(userId) {
  return new Promise(function(resolve, reject) {
    // 模拟异步操作
    setTimeout(function() {
      if (userId === 123) {
        resolve({
          id: userId,
          name: 'John'
        }); // 返回成功结果
      } else {
        reject(new Error('User not found')); // 返回失败结果
      }
    }, 1000);
  });
}

getUserData(123)
.then(function(data) {
  console.log(data); // 输出 { id: 123, name: 'John' }
})
.catch(function(error) {
  console.error(error);
});

Async/Await示例

以下代码通过Async/Await实现了同样的异步操作并返回结果：

async function getUserData(userId) {
  try {
    const data = await new Promise(function(resolve, reject) {
      setTimeout(function() {
        if (userId === 123) {
          resolve({
            id: userId,
            name: 'John'
          });
        } else {
          reject(new Error('User not found'));
        }
      }, 1000);
    });
    console.log(data); // 输出 { id: 123, name: 'John' }
  } catch (error) {
    console.error(error);
  }
}

getUserData(123);

两个示例都实现了通过异步操作获取用户数据的功能，但使用了不同的方式。Promise使用了链式调用的方式，而Async/Await则使用了更加直观、易读的方式。