ES6 Map

ES6 Rest参数

ES6 Promises

Promise 代表最终实现的东西。 Promise 可以根据操作结果被拒绝或解决。

ES6 Promise 是最简单的方法在 JavaScript 中使用异步编程。异步编程包括从主线程单独运行进程，并在完成时通知主线程。在 Promises 之前，回调用于执行异步编程。

回调

回调是处理函数执行的一种方式在另一个函数的执行完成之后。

回调将有助于处理事件。在回调中，一个函数可以作为参数传递给另一个函数。

为什么需要 Promise？

回调是处理基本情况的好方法，例如最少的异步操作。但是当你开发一个包含大量代码的 Web 应用程序时，使用 Callback 会很麻烦。这种过多的回调嵌套通常被称为回调地狱。

为了处理这种情况，我们必须使用Promises而不是Callbacks .

Promise 是如何工作的？

Promise 表示异步操作的完成。它根据被拒绝或已解决的操作返回一个值。 Promise主要分为三个阶段，如下图所示:

ES6 Promises_https://bianchenghao6.com_【ES6 教程】_第1张

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!")
  })

输出

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

输出

Error: fail

.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);
})

输出

Promise 1 is first

ES6 Promise Chaining

Promise 链允许我们控制 JavaScript 异步操作的流程。通过使用 Promise 链，我们可以使用 Promise 的返回值作为另一个异步操作的输入。

ES6 Promises_https://bianchenghao6.com_【ES6 教程】_第2张

有时，希望将 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打开终端。上面代码执行成功后，我们会得到如下输出。

输出

ES6 Promises_https://bianchenghao6.com_【ES6 教程】_第3张

ES6 Map

ES6 Rest参数