Vue.js中函数的func().then()链式调用和Promise.resolve的用法解析

在Vue.js开发中会遇到异步调用的场景，但是有的时候我们需要等待异步完成再进行下一步，就会用到func().then()这样的方式，想使用这样的方式就得使用Promise，写这篇文章就是我在搜索的时候发现有的人写的并不对，有点误人子弟，所以我也写一下我的版本。

Promise是什么

我之前搜索的时候别人写的有点乱，那我就用大白话，一句进行解释：Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及该异步操作的结果值。

使用案例

我将使用ES6语法演示Promise的使用，场景设计为：函数func1是异步程序，但是需要func1执行成功以后再执行后续func2逻辑，演示：

function func1() {
    return new Promise((resolve, reject) => {
        //注：Promise实例只能通过resolve 或 reject 函数来返回，并用then()或者catch()获取
        //不能在里面直接return ... 这样是获取不到Promise返回值的
        //这里模拟异步动作，一般来说可以放置Ajax请求, 'func1-result'为请求成功后的返回结果
        setTimeout(() => resolve('func1-result'), 1000)
    })
}
//func1执行成功以后再执行后续func2逻辑
func1().then(response => {
    //func1执行成功以后执行func2
func2();
}).catch (error => {
    //func1执行失败，打印日志
console.log (error)
});

根据上面的案例，应该就理解Promise的用法了：

1. Promise实例化时带有一个构造函数 executor，并接收 resolve 和 reject 两个参数的函数
2. Promise构造函数执行时立即调用executor函数，并将 resolve 和 reject 两个函数作为参数传递给executor
3. resolve 和 reject 函数被调用时，分别将Promise的状态改为fulfilled(完成) 或rejected(失败)
4. 也就是说，executor 内部通常会执行一些异步操作，一旦异步操作执行完毕（可能成功/失败）
5. 要么调用resolve函数来将Promise状态改成fulfilled，要么调用reject函数来将Promise状态改为rejected
6. 如果在executor函数中抛出一个错误，即使没有调用reject,该Promise的状态也改为rejected