es6 基础学习之Promise和async await的相关

ES6 中的 Promise

Promise 是 ES6 中引入的一个构造函数,用于处理异步操作。一个 Promise 对象代表一个还没有完成但预计将在未来完成的操作。

创建一个 Promise

一个 Promise 的基础语法如下:

javascript 复制代码
const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 操作成功 */) {
    resolve('Success');
  } else {
    reject('Error');
  }
});

使用 Promise

你可以使用 .then().catch() 方法来处理 Promise。

javascript 复制代码
myPromise
  .then((result) => {
    console.log(result); // 输出 'Success'
  })
  .catch((error) => {
    console.log(error); // 输出 'Error'
  });

链式调用

Promise 可以链式调用:

javascript 复制代码
Promise.resolve('Success')
  .then((result) => {
    return result + ' - Step 1';
  })
  .then((result) => {
    console.log(result); // 输出 'Success - Step 1'
  });

并行执行多个 Promise

使用 Promise.all

javascript 复制代码
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // 输出 [1, 2]
  });

ES8 中的 asyncawait

ES8(ECMAScript 2017)引入了 asyncawait 关键字,使异步代码更像同步代码。

使用 asyncawait

一个简单的例子:

javascript 复制代码
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Fetch failed:', error);
  }
}

在这个例子中,fetchData 函数前面有一个 async 关键字,表示这是一个异步函数。在异步函数内部,你可以使用 await 关键字等待一个 Promise 完成并返回其结果。

错误处理

使用 try/catch 结构进行错误处理。

javascript 复制代码
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Fetch failed:', error);
  }
}

并行执行多个异步操作

使用 Promise.allawait

javascript 复制代码
async function fetchData() {
  const [data1, data2] = await Promise.all([fetch('url1'), fetch('url2')]);
  // Do something with data1 and data2
}

Promiseasync/await 都是处理异步操作的强大工具。async/await 基于 Promise 实现,但提供了更直观、更易读的语法。希望这些信息能帮助你更好地理解和使用这些异步编程特性。

相关推荐
LCG元1 小时前
Vue.js实例开发-如何通过Props传递数据
vue.js
一个处女座的程序猿O(∩_∩)O3 小时前
完成第一个 Vue3.2 项目后,这是我的技术总结
前端·vue.js
GIS开发特训营4 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood5 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
一个处女座的程序猿O(∩_∩)O8 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
燃先生._.14 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
2401_8576009517 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_8576009517 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL17 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
轻口味17 小时前
Vue.js 核心概念:模板、指令、数据绑定
vue.js