1、promise对象的介绍

1.1 什么是Promise对象：

Js中进行异步编程的新的解决方案（传统的解决方案——回调函数和事件），

用于表示一个异步操作的最终完成 (或失败), 及其结果值.。

语法上：promise是一个构造函数

简单来说，promise对象用来封装一个异步操作并可以获取其结果 可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise是一个代理对象，它代理的是一个值，这个值我们可以称为Promise对象的状态（status）。这个status对Promise非常重要

1.2 promise三种状态：

pending（进行中，初始状态，既不是成功，也不是失败状态）

fulfilled （已完成）

rejected (已失败)

一个promise的状态只可能从 “等待”转到“成功“态或者 “失败“态，不能逆向转换，

同时“成功“态和“失败“态不能相互转换

promise必须实现then方法（then就是promise的核心），而且then必须返回一个promise，

同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致 then方法接受两个参数

第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，

另一个是失败时的回调，在promise由“等待”态转换到“拒绝"态时调用。

同时，then可以接受另一个promise传入，

也接受一个“类then”的对象或方法解决函数的回调嵌套问题

1.3 promise 一些方法

Promise.prototype.then()

Promise实例具有then方法，then是定义在原型对象上的

Promise.prototype.catch()

是.then(null,rejection)的别名，用于指定发生错误时的回调函数

Promise.all() 都执行完再执行， Promise.race (）最快的那个执行完了就执行

1.4 Promise缺点

无法取消Promise，一旦新建它就会立即执行，无法中途取消如果不设置回调函数，Promise内部抛出的错误，不会反应到外部当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）针对Promise缺点，诞生了async和await（es7中）

async是一个函数的修饰符，加上async关键词的函数会隐式地返回一个Promise 函数的返回值将作为Promise resolve的值 await后面跟的一定是一个Promise，async只能出现在async函数内 await的语义是:必须等到await后面跟的Promise有了返回值，才能继续执行await的下一行代码

2、Promise 的基本使用

示例1：

function rand(m, n) {
         return Math.ceil(Math.random() * (n - m + 1)) + (m - 1)
  }

const p = new Promise((resolve, reject) => {
        setTimeout(() => {
            const a = rand(1, 100)
            if (a <= 30) {
                resolve(a)
            } else {
                reject(a)
            }
        }, 1000)
})

console.log(p);

p.then((value) => {
    alert("恭喜你中奖了,你的号码是"+value)
}, (reson) => {
    alert("再接再厉,你的号码是："+reson)
})

示例2(配合asycn/await的使用)：

const store = new Vuex.Store({
  state: {
    name: '张三',
    number: 0,
  },
  mutations: {
    setNumberIsWhat(state, payload) {
      state.number = payload.number;
    },
  },
  actions: {
    // 增加actions属性
    setNum(content) {
      // 增加setNum方法，默认第一个参数是content，其值是复制的一份store
      return new Promise(resolve => {
        // 我们模拟一个异步操作，1秒后修改number为888
        setTimeout(() => {
          content.commit('setNumberIsWhat', { number: 888 });
          resolve();
        }, 1000);
      });
    },
  },
});

async mounted() {
  console.log(`旧值：${this.$store.state.number}`);
  await this.$store.dispatch('setNum');
  console.log(`新值：${this.$store.state.number}`);
}

Promise对象的作用与使用(配合async/await的使用)