ES6 promise

Promise是在 JavaScript(也称为 ECMAScript-6)中实现异步编程的一种方式。JavaScript 中使用Promise进行异步编程。对于异步编程,JavaScript 使用回调,但使用回调会出现一个问题,即回调地狱(多个或依赖回调)或所谓的 "地狱金字塔"。使用 ES6 的Promise将简单地避免与回调相关的所有问题。

当处理基本情况时,回调很棒。但是,在开发具有大量代码的 Web 应用程序时,回调可能会带来很大的麻烦。在复杂情况下,每个回调都会增加一层嵌套,这会使你的代码变得非常混乱且难以理解。简单来说,代码中存在多个回调会增加代码的复杂性,包括可读性、可执行性等方面。这种过度嵌套的回调通常被称为回调地狱。

例子:回调地狱。

javascript 复制代码
f1(function(x){ 
	f2(x, function(y){ 
		f3(y, function(z){ 
			... 
		}); 
	}); 
}); 

为了解决这个问题,我们使用Promise而不是回调。

创建Promise:

当我们不确定分配的任务是否会完成时,就会创建一个Promise。Promise对象表示异步操作的最终完成(或失败)及其结果值。Promise始终处于以下状态之一:

fulfilled:与Promise相关的操作成功完成。

rejected:与Promise相关的操作失败。

pending:Promise仍在进行中,即尚未fulfilled或rejected。

settled:Promise已经fulfilled 或 rejected。

语法:

javascript 复制代码
const promise = new Promise((resolve,reject) => {....}); 

举例:

javascript 复制代码
const myPromise = new Promise((resolve, reject) => { 
    if (Math.random() > 0) { 
        resolve('Hello, I am positive number!'); 
    } 
    reject(new Error('I failed some times')); 
}) 

Promise的回调:

用于处理Promise的两种类型的回调是 .then() 和 .catch()。它可以用于处理Promise的实现或拒绝。

  • JavaScript .then() 方法

当Promise实现或拒绝时调用。它可以链接到处理Promise的实现或拒绝。它接受两个函数作为参数。第一个函数在fulfilled时调用,第二个(可选)在rejected时调用。

例子:使用 .then() 处理Promise拒绝

javascript 复制代码
var promise = new Promise((resolve, reject) => { 
    resolve('Hello, I am a Promise!'); 
}) 
  
promise.then((promise_kept_message) => { 
    console.log(promise_kept_message); 
}, (error) => { 
console.log(error); })

输出:

Hello, I am a Promise!

  • JavaScript .catch() 方法:

这可以用于处理错误(如果有)。它只接受一个函数作为参数,该函数用于处理错误(如果有)。

例子:使用 .catch() 处理rejected

javascript 复制代码
const myPromise = new Promise((resolve, reject) => { 
	if (Math.random() > 0) { 
		console.log('resolving the promise ...'); 
		resolve('Hello, Positive :)'); 
	} 
	reject(new Error('No place for Negative here :(')); 
}); 

const Fulfilled = (fulfilledValue) => console.log(fulfilledValue); 
const Rejected = (error) => console.log(error); 
myPromise.then(Fulfilled, Rejected); 

myPromise.then((fulfilledValue) => { 
	console.log(fulfilledValue); 
}).catch(err => console.log(err));

输出:

javascript 复制代码
resolving the promise ...
Hello, Positive :)
Hello, Positive :)
相关推荐
小希爸爸3 分钟前
1、中医基础入门和养生
前端·后端
神仙别闹1 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
下雨的Jim1 小时前
前端速成之——Script
前端·笔记
Captaincc2 小时前
使用 Copilot 代理模式构建着陆页
前端·ai编程·github copilot
zyk_5202 小时前
前端渲染pdf文件解决方案-pdf.js
前端·javascript·pdf
Apifox.2 小时前
Apifox 4月更新|Apifox在线文档支持LLMs.txt、评论支持使用@提及成员、支持为团队配置「IP 允许访问名单」
前端·人工智能·后端·ai·ai编程
划水不带桨2 小时前
大数据去重
前端
沉迷...2 小时前
手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏
前端·javascript·echarts
可观测性用观测云2 小时前
观测云数据在Grafana展示的最佳实践
前端
uwvwko3 小时前
ctfhow——web入门214~218(时间盲注开始)
前端·数据库·mysql·ctf