ES6 Promise介绍和用法示例

本文概述

回调
为什么需要Promise？
Promise如何工作？
Promise
Promise方法
ES6 promise链

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

Promise方法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 first

ES6 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打开终端。成功执行以上代码后, 我们将获得以下输出。
【ES6 Promise介绍和用法示例】输出如下