async, await, 和 Promise 是JavaScript中用于处理异步操作的重要特性。下面我将逐一解释这些概念以及它们的使用方法。

1. Promise

• 概念: Promise 是一个代表了异步操作最终完成或失败的对象。它有三种状态：pending（进行中）、fulfilled（已成功）、和rejected（已失败）。

• 创建Promise:

  let promise = new Promise((resolve, reject) => {
    // 异步操作代码
    if (/* 异步操作成功 */) {
      resolve(value); // 表示成功，传递成功值
    } else {
      reject(error); // 表示失败，传递错误或失败信息
    }
  });
  copy success

• 使用Promise:

  • .then() 用于处理成功情况。
  • .catch() 用于处理错误。可以被认为是then(null, func2)的简写形式
  • .finally() 不论成功或失败都会执行。

  promise
    .then(value => {
      // 处理成功的情况
    })
    .catch(error => {
      // 处理失败的情况
    })
    .finally(() => {
      // 总是会执行的代码
    });
  copy success

2. async 和 await

• async:

  • async 关键字用于声明一个异步函数，它会自动将函数的返回值转换为Promise对象。
  • 使用async声明的函数，其内部可以使用await。

  async function asyncFunction() {
    // 异步操作
  }
  copy success

• await:

  • await 关键字用于等待一个Promise完成，并且只能在async函数内部使用。
  • 它会暂停async函数的执行直到Promise被解决（fulfilled）或拒绝（rejected），然后返回Promise的结果。

  async function asyncFunction() {
    try {
      let value = await promise; // 等待并获取Promise结果
      // 使用value进行接下来的操作
    } catch (error) {
      // 处理可能出现的错误
    }
  }
  copy success

实例

async function getUserData(userId) {
  try {
    let response = await fetch(`https://api.example.com/users/${userId}`);
    let data = await response.json();
    return data;
  } catch (error) {
    console.error('获取用户数据时出错:', error);
  }
}
copy success

在这个例子中，getUserData 函数用 async 声明，它等待 fetch 请求的完成并处理返回的JSON。如果过程中有任何错误，例如网络问题，它会被 catch 捕获并处理。

通过这种方式，async 和 await 使得异步代码的写法更加接近同步代码，提高了代码的可读性和维护性。

// 引入axios库
const axios = require("axios");

// 使用async声明一个异步函数
async function fetchUserData(userId) {
  try {
    // 使用await等待异步操作结果
    const response = await axios.get(
      `https://jsonplaceholder.typicode.com/users/${userId}`
    );

    // 返回获取的数据
    return response.data;
  } catch (error) {
    // 错误处理
    console.error("请求出错:", error);
  }
}

// 调用函数并处理结果
fetchUserData(1)
  .then((userData) => {
    console.log("用户数据:", userData);
  })
  .catch((error) => {
    console.error("处理数据时出错:", error);
  });

copy success

	用户数据: {
	  id: 1,
	  name: 'Leanne Graham',
	  username: 'Bret',
	  email: '[email protected]',
	  address: {
	    street: 'Kulas Light',
	    suite: 'Apt. 556',
	    city: 'Gwenborough',
	    zipcode: '92998-3874',
	    geo: { lat: '-37.3159', lng: '81.1496' }
	  },
	  phone: '1-770-736-8031 x56442',
	  website: 'hildegard.org',
	  company: {
	    name: 'Romaguera-Crona',
	    catchPhrase: 'Multi-layered client-server neural-net',
	    bs: 'harness real-time e-markets'
	  }
	}
copy success

let p1 = Promise.resolve(123);
let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("hello");
  }, 500);
});
let p3 = Promise.resolve("success");
Promise.all([p1, p2, p3]).then(
  (result) => {
    console.log(result);
  },
  (error) => {
    console.log(error);
  }
);
console.log("---");

copy success

'---' [123, 'hello','success']