Promise及其应用

一、Promise的概念

Promise 是一个对象，对象里存储一个状态，这个状态是可以随着内部的执行转化的。简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。promise 有三种状态：等待中(Pending)、已完成(Fulfilled)、已失败(Rejected)。

二、Promise的原理

• 构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject。
• Promise上还有then方法，then方法就是用来指定Promise对象的状态改变时确定执行的操作，resolve 时执行第一个函数（onFulfilled），reject时执行第二个函数（onRejected）
• 当状态变为resolve时便不能再变为reject，反之同理。

三、Promise的特点

当promise状态发生改变，就会触发then()里的响应函数处理后续步骤。promise状态一经改变，不会再变(不可逆状态 )。

Promise对象的状态改变，只有两种可能：

要么是从pending变为fulfilled

要么是从pending变为rejected。

只要这两种情况只要发生，状态就凝固了，不会再变了。

四、Promise的两个参数

Promise 有两个参数 resolve 和 reject。

       resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

       reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

五、异步编程与Promise的关系

Promise本身不是异步的，只有它的then()或者catch()方法才是异步的，也可以说Promise的返回值是异步的。

六、Promise的作用与用法

（1）、promise.all基本用法:都成功的时候才得到（有catch回调例外）

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
}).catch(e => e);
const p2 = new Promise((resolve, reject) => {
  resolve('world');
}).catch(e => e);

Promise.all([p1, p2])
  .then(result => {
    console.log(result) //['hello','world']
  })
  .catch(e => console.log(e))
  

（2）、 promise.all基本用法

promise.then中的函数是异步执行。

当此方法执行完后再执行内部的程序是避免了没有获取到数据。

七、Promise在实际环境下的应用

（1）将图片的加载写成一个Promise，一旦加载完成，Promise的状态就发生变化。

const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const img = new Image();
    img.onload  = resolve;
    img.onerror = reject;
    img.src = path;
  });
};

七、async/await的作用与用法

1.async做了什么

async会返回一个promise对象。

async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

注意：async表示函数内部有异步操作；

          一般 await 关键字要在 async 关键字函数的内部，await 写在外面会报错。

2、await等到返回值后，会怎么样

1.不是promise对象

      如果不是 promise , await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，把这个非promise的东西，作为 await表达式的结果；
2.是promise对象

      如果它等到的是一个 promise 对象，await 也会暂停async后面的代码，先执行async外面的同步代码，等着 Promise 对象 fulfilled，然后把 resolve 的参数作为 await 表达式的运算结果。