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 :)