ES6 Promises
ES6 Promises
Promise 代表最终实现的东西。 Promise 可以根据操作结果被拒绝或解决。
ES6 Promise 是最简单的方法在 JavaScript 中使用异步编程。异步编程包括从主线程单独运行进程，并在完成时通知主线程。在 Promises 之前，回调用于执行异步编程。
回调
回调是处理函数执行的一种方式在另一个函数的执行完成之后。
回调将有助于处理事件。在回调中，一个函数可以作为参数传递给另一个函数。
为什么需要 Promise？
回调是处理基本情况的好方法，例如最少的异步操作。但是当你开发一个包含大量代码的 Web 应用程序时，使用 Callback 会很麻烦。这种过多的回调嵌套通常被称为回调地狱。
为了处理这种情况，我们必须使用Promises而不是Callbacks .
Promise 是如何工作的？
Promise 表示异步操作的完成。它根据被拒绝或已解决的操作返回一个值。 Promise主要分为三个阶段，如下图所示:
Pending- 是每个Promise的初始状态。表示结果还没有计算出来。
Fulfilled- 表示操作已经完成。
Rejected- > 它代表在计算过程中发生的失败。
一旦 Promise 被实现或拒绝，它将是不可变的。 Promise() 构造函数接受两个参数，分别是 rejected 函数和 resolve 函数。基于异步操作，它返回第一个参数或第二个参数。
创建一个 Promise
在 JavaScript 中，我们可以通过使用 Promise() 构造函数。
语法
const Promise = new Promise((resolve,reject) => {....});
示例
let Promise = new Promise((resolve, reject)=>{
let a = 3;
if(a==3){
resolve('Success');
}
else{
reject('Failed');
}
})
Promise.then((message)=>{
console.log("It is then block. The message is: ?+ message)
}).catch((message)=>{
console.log("It is catch block. The message is: ?+ message)
})
输出
It is then block. The message is: Success
Promise 方法
Promise 方法用于处理 Promise 对象的拒绝或解析。让我们了解一下 Promise 方法的简要说明。
.then()
当 Promise 完成或拒绝时调用此方法。可以链接此方法来处理 Promise 的拒绝或履行。 resolved 和 rejected 需要两个函数参数。第一个在 Promise 完成时被调用，第二个(可选)在 Promise 被拒绝时被调用。
让我们通过下面的例子来理解如何处理 Promise 拒绝和解析使用 .then() 方法。
示例
let success = (a) => {
console.log(a + " it worked!")
}
let error = (a) => {
console.log(a + " it failed!")
}
const Promise = num => {
return new Promise((resolve,reject) => {
if((num%2)==0){
resolve("Success!")
}
reject("Failure!")
})
}
Promise(100).then(success, error)
Promise(21).then(success,error)
输出
Success! it worked!
Failure! it failed!
.catch()
这是处理失败和拒绝的好方法。它只需要一个函数参数来处理错误。
让我们通过下面的例子来了解如何使用 .catch() 方法来处理 Promise 拒绝和失败。
示例
const Promise = num => {
return new Promise((resolve,reject) => {
if(num > 0){
resolve("Success!")
}
reject("Failure!")
})
}
Promise(20).then(res => {
throw new Error();
console.log(res + " success!")
}).catch(error => {
console.log(error + " oh no, it failed!")
})
输出
.resolve()
它返回一个新的 Promise 对象，它用给定的值解析。如果该值具有 .then() 方法，则返回的 Promise 将遵循 .then() 方法采用其最终状态；否则，返回的 Promise 将使用 value 实现。
Promise.resolve('Success').then(function(val) {
console.log(val);
}, function(val) {
});
.reject()
它返回一个被拒绝的具有给定值的 Promise 对象。
示例
function resolved(result) {
console.log('Resolved');
}
function rejected(result) {
console.error(result);
}
Promise.reject(new Error('fail')).then(resolved, rejected);
输出
.all()
它需要一个 Promise 数组作为参数。此方法返回一个 resolved Promise，当作为迭代传递的所有 Promise 都已完成时，该 Promise 会完成。
示例
const PromiseA = Promise.resolve('Hello');
const PromiseB = 'World';
const PromiseC = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 1000);
});
Promise.all([PromiseA, PromiseB, PromiseC]).then(function(values) {
console.log(values);
});
输出
[ 'Hello', 'World', 1000 ]
.race()
此方法用于根据第一个解析的引用的 Promise 返回已解析的 Promise。
示例
const Promise1 = new Promise((resolve,reject) => {
setTimeout(resolve("Promise 1 is first"),1000)
})
const Promise2= new Promise((resolve,reject) =>{
setTimeout(resolve("Promise 2 is first"),2000)
})
Promise.race([Promise1,Promise2]).then(result => {
console.log(result);
})
输出
ES6 Promise Chaining
Promise 链允许我们控制 JavaScript 异步操作的流程。通过使用 Promise 链，我们可以使用 Promise 的返回值作为另一个异步操作的输入。
有时，希望将 Promise 链接在一起。例如，假设我们有几个异步操作要执行。当一个操作给我们数据时，我们将开始对那块数据进行另一个操作，依此类推。
当我们有多个相互依赖的异步函数时，Promise 链很有用，并且这些函数中的每一个都应该在之后运行一个另一个。
让我们通过下面的例子来尝试理解 Promise 链的概念:
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
const PromiseA = () =>{
return new Promise((resolve,reject)=>{
resolve("Hello Promoise A");
});
}
const PromiseB = () =>{
return new Promise((resolve,reject)=>{
resolve("Hello Promise B");
});
}
const PromiseC = () =>{
return new Promise((resolve,reject)=>{
resolve("Hello Promise C");
});
}
PromiseA().then((A)=>{
console.log(A);
return PromiseB();
}).then((B)=>{
console.log(B);
return PromiseC();
}).then((C)=>{
console.log(C);
});
</script>
</body>
</html>
在浏览器中执行以上代码，使用ctrl+shift+I打开终端。上面代码执行成功后，我们会得到如下输出。
输出
