srcmini本文概述
Promise代表了最终实现的目标。 Promise可以根据操作结果被拒绝或解决。
ES6 Promise是使用JavaScript进行异步编程的最简单方法。异步编程包括从主线程单独运行进程, 并在完成后通知主线程。在”Promise”之前, “回调”用于执行异步编程。
回调
回调是在另一个函数执行完成之后处理函数执行的一种方法。
回调将有助于处理事件。在回调中, 一个函数可以作为参数传递给另一个函数。
为什么需要Promise？
当处理基本情况(例如最少的异步操作)时, 回调是一种很好的方法。但是, 当你开发具有大量代码的Web应用程序时, 使用Callback会很麻烦。这种过多的回调嵌套通常称为”回调地狱”。
为了处理这种情况, 我们必须使用Promises而不是Callbacks。
Promise如何工作？
Promise表示异步操作的完成。它基于被拒绝或解决的操作返回单个值。 Promise主要分为三个阶段, 如下所示：
待定-这是每个Promise的初始状态。它表示结果尚未计算。
已完成-表示操作已完成。
已拒绝-表示在计算过程中发生的故障。
一旦实现或拒绝了Promise, 它就不会改变。 Promise()构造函数接受两个参数, 分别为拒绝函数和解析函数。基于异步操作, 它返回第一个参数或第二个参数。
Promise
在JavaScript中, 我们可以使用Promise()构造函数创建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: SuccessPromise方法
Promise方法用于处理Promise对象的拒绝或解析。让我们了解Promise方法的简短描述。
.then()
当实现或拒绝Promise时, 将调用此方法。可以将这种方法链接起来, 以处理对Promise的拒绝或履行。它需要两个功能性参数来解决和拒绝。第一个在Promise履行时被调用, 第二个(可选)在Promise被拒绝时被调用。
让我们通过下面的示例理解如何使用.then()方法处理Promise拒绝和解决方案。
例子
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!")
})输出如下
Error oh no, it failed!.resolve()
它返回一个新的Promise对象, 并使用给定的值对其进行解析。如果该值具有.then()方法, 则返回的Promise将遵循.then()方法采用其最终状态的情况；否则, 返回的Promise将实现价值。
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);输出如下
Error: fail.all()
它以Promises数组作为参数。此方法返回一个已解析的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);
})输出如下
Promise 1 is firstES6 promise链
Promise链使我们能够控制JavaScript异步操作的流程。通过使用Promise链接, 我们可以将Promise的返回值用作另一个异步操作的输入。
有时, 希望将Promises链接在一起。例如, 假设我们有几个异步操作要执行。当一个操作为我们提供数据时, 我们将开始对该数据块执行另一操作, 依此类推。
当我们有多个相互依赖的异步函数, 并且每个函数都应该一个接一个地运行时, 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打开终端。成功执行以上代码后, 我们将获得以下输出。
输出如下
评论前必须登录！
注册