高级 JavaScript 概念 Promise、async/await 和 try-catch

PHP中文网 • 2025年3月7日 07:34:45 • 编程技术 • 阅读 2

第 8 天：高级 javascript 概念

日期：2024 年 12 月 15 日

欢迎来到第八天！今天，我们探讨一些最强大、最先进的 javascript 概念，这些概念可以提高您的编程技能。其中包括现代 es6 功能、使用 promise 和 async/await 的异步编程，以及使用 try-catch 的有效错误处理。这些工具对于构建高效、可读且可维护的 javascript 应用程序至关重要。

1. es6 特性简介

es6（也称为 ecmascript 2015）引入了多项功能，使 javascript 更加强大且对开发人员友好。让我们讨论一些关键功能：

解构

解构允许您从数组中提取值或从对象的属性中提取值，并以干净简洁的方式将它们分配给变量。

立即学习“Java免费学习笔记（深入）”；

示例：数组解构

const numbers = [1, 2, 3];const [first, second, third] = numbers;console.log(first, second, third); // output: 1 2 3

登录后复制

示例：对象解构

const user = { name: "alice", age: 25 };const { name, age } = user;console.log(name, age); // output: alice 25

登录后复制

模板文字

模板文字通过允许嵌入表达式和多行字符串来简化字符串格式。

示例：字符串插值

const name = "john";const greeting = `hello, ${name}! welcome to javascript.`;console.log(greeting); // output: hello, john! welcome to javascript.

登录后复制

示例：多行字符串

const message = `this is amulti-line string using template literals.`;console.log(message);

登录后复制

2. promise 和 async/await

承诺

promise 是一个表示异步操作最终完成或失败的对象。

示例：使用 promise

const fetchdata = new promise((resolve, reject) => {  let dataloaded = true;  if (dataloaded) {    resolve("data fetched successfully!");  } else {    reject("failed to fetch data.");  }});fetchdata  .then((data) => console.log(data))  // output: data fetched successfully!  .catch((error) => console.error(error));

登录后复制

异步/等待

async/await 是一种更简洁的使用 promise 的方式，使异步代码看起来和行为都像同步代码。

示例：使用 async/await

const fetchdata = () => {  return new promise((resolve, reject) => {    settimeout(() => resolve("data loaded!"), 2000);  });};const getdata = async () => {  console.log("fetching data...");  const data = await fetchdata();  console.log(data); // output: data loaded!};getdata();

登录后复制

3.使用 try-catch 进行错误处理

代码执行期间可能会发生错误，尤其是异步操作时。妥善处理这些错误可确保流畅的用户体验。

示例：基本 try-catch

try {  let result = 10 / 0;  console.log(result); // output: infinity} catch (error) {  console.error("an error occurred:", error.message);}

登录后复制

将 try-catch 与 async/await 结合使用

使用异步代码时，使用 try-catch 来处理错误。

const fetchdata = () => {  return new promise((resolve, reject) => {    let success = false;    if (success) {      resolve("data fetched!");    } else {      reject("failed to fetch data.");    }  });};const getdata = async () => {  try {    const data = await fetchdata();    console.log(data);  } catch (error) {    console.error("error:", error);  }};getdata();

登录后复制

4.实际用例

让我们将这些概念结合到一个真实的示例中：从 api 获取用户数据。

示例：使用异步/等待和错误处理获取数据

const fetchUserData = async () => {  try {    const response = await fetch("https://jsonplaceholder.typicode.com/users");    if (!response.ok) {      throw new Error("Failed to fetch user data.");    }    const data = await response.json();    console.log("User Data:", data);  } catch (error) {    console.error("Error:", error.message);  }};fetchUserData();

登录后复制